本人水平有限，如有疏漏或者不正確部分，請大佬指正。 一.Vuex概述 1.1組件之間共用數據的方式 父向子傳值：v-bind 屬性綁定子向父傳值：v-on 事件綁定兄弟組件之間共用數據：eventBUs* $on 接收數據的那個組件* $emit 發送數據的那個組件 特點：適合小範圍使用 1.2Vu ...
本人水平有限，如有疏漏或者不正確部分，請大佬指正。
一.Vuex概述
1.1組件之間共用數據的方式
父向子傳值：v-bind 屬性綁定
子向父傳值：v-on 事件綁定
兄弟組件之間共用數據：eventBUs
* $on 接收數據的那個組件
* $emit 發送數據的那個組件
特點：適合小範圍使用
1.2Vuex是什麼
概念：Vuex是實現組建全局狀態(數據)管理的一種機制，可以方便的實現組件之間數據的共用
1.3使用Vuex統一管理狀態的好處
①：能夠在vuex中集中管理共用的數據，易於開發和後期維護
②：能夠高效地實現組件之間的數據共用，提高開發效率
③：儲存在vuex中的數據都是響應式的，能夠試試保持數據與頁面的同步
1.4什麼樣的數據適合存儲到Vuex中
一般情況下，只有組件之間共用的數據，才有必要存儲到vuex中，對於組件中的私有數據，依舊存儲在組件自身的data中即可。
二.Vuex的基本使用
1.安裝vuex依賴包
npm install vuex --save
2.導入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
3.創建store對象
const store =new Vuex.Store({
//state 中存放的就是全局共用的數據
state：{ count : 0}
}）
4.將store 對象掛載到vue實例中
new Vue（{
el:"#app",
render:h => h(app),
router,
store
})
三.Vuex的核心概念
3.1核心概念包括 State，Mutation,Action,Gentter.Modules
3.2 state部分
State提供唯一的公共資源數據資源，所有共用數據都要統一放到Store的state中進行存儲。
組件訪問State中數據的第一種方式：
this.$store.state.全局數據名稱
第二種方式：
首先從 vuex 中引入 mapState
通過剛纔導入的mapState函數，將當前組件所需要的全局數據，映射為當前組件的computed計算屬性。便可直接調用使用
註意：雖然可以通過以上兩種方式修改 state 內部的數據，但是不建議使用該方式修改。
3.3 Mutation
Mutation用於變更state中的數據，
①:只能使用mutation 變更Store數據，不可以直接操作Store中的數據
②:通過這種方式雖有點繁瑣，但是可以集中監控所有數據的變化
話不多說，上圖：
第一種方式 觸發 mutation （不帶參數）
觸發 mutation （攜帶參數）
第二種方式 觸發 mutation
3.4 Action
Action 用於處理非同步任務，想設置一些定時器等
第一種 觸發action (不攜帶參數)
觸發 action （攜帶參數）
第二種方式 觸發 action
3.5Getter
只是對 state中的數據起到包裝的作用，並不會修改任何數據。
①Getter可以對Store中已有的數據加工處理之後形成新的數據，類似Vue的計算屬性。
②Store中數據發生變化，Getter的數據也會跟著變化。
使用方法：
觸發方法
3.6modules
本部分參考自本文為CSDN博主「Meet_you_Q」
原文鏈接：https://blog.csdn.net/m0_60337445/article/details/122891271
modules 其實就是可以定義多個不同的 store ,互相抽離，防止數據過多，以至於導致單個store 過於臃腫
先簡單的舉個例子
index.js 文件的內容
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from '@/store/modules/moduleA'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
name: 'xxx'
},
mutations: {
changeName(state) {
state.name = 'xxx+++';
}
},
actions: {
},
// 就是使用modules屬性在進行註冊兩個狀態管理模塊
modules: {
moduleA,
}
});
export default store
moduleA.js的內容
export default {
state: {
name: 'aaa'
},
getters: {},
mutations: {
changeName(state, msg) {
console.log(msg);
state.name = 'aaa+++' + msg;
}
},
actions: {
actChangeName(context, msg) {
console.log(msg);
context.commit('changeName', msg);
}
}
}
調用state中數據的方式
由於我們是使用了模塊化的方式，調用最外層的state中的數據 依然是this.$store.state.name
那麼在使用modulesA中的方法的時候，是使用 this.$store.state.moduleA.name
調用mutations或者是actions中的方法
由於是沒有對模塊進行命名空間的，所以預設在使用 this.$store.commit/dispatch() 在提交方法的時候，會對所有狀態管理的actions和mutations中的方法進行匹配，這就導致了一個問題，就是當不同模塊之間的方法命名一樣的情況下，會造成方法同時調用的問題
這個時候，我們需要在定義模塊的時候，添加上 namespaced:true 屬性
export default {
namespaced: true, // 為當前模塊開啟獨立的 命名空間
state: {
name: 'aaa'
},
getters: {},
mutations: {
changeName(state, msg) {
console.log(msg);
state.name = 'aaa+++' + msg;
}
},
actions: {
actChangeName(context, msg) {
console.log(msg);
context.commit('changeName', msg);
}
}
}
使用命名空間之後的調用方式
我們需要在使用 this.$store.commit/dispatch() 的時候 需要在前面加上我們當前模塊名
例如： this.$store.commit("moduleA/changeName");
this.$store.dispatch("moduleA/actChangeName");
這樣就可以去調用指定的模塊裡面的方法，當前最外圍的mutations和actions還是一樣的調用方式
在使用了模塊後屬性的參數
mutations和actions的參數是沒什麼太大變化的
getters中是這樣的
getters: {
filters(state, getters, rootState) {
console.log(getters); // 代表的是getters屬性
// rootState ---> 根節點的狀態（也就是最外層的state）
return state.name + rootState.name;
}
},
使用了模塊化之後的輔助函數的使用
<!-- App -->
<template>
<div id="app">
<Panel>
<template #test="{ user }">
{{ user.id }}
</template>
</Panel>
<h2>{{ name }}</h2>
<button @click="changeName">觸發mutations</button>
<button @click="actChangeName">觸發actions</button>
<h2>{{ filters }}</h2>
</div>
</template>
<script>
// 這裡可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）
// 例如：import 《組件名稱》 from '《組件路徑》';
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions, mapGetters } =
createNamespacedHelpers("moduleA"); // 需要指定模塊名字
import Panel from "@/components/Panel";
export default {
name: "App",
// import引入的組件需要註入到對象中才能使用
components: {
Panel,
},
data() {
return {};
},
// 監聽屬性 類似於data概念
computed: {
...mapState(["name"]),
...mapGetters(["filters"]),
},
// 監控data中的數據變化
watch: {},
// 方法集合
methods: {
// handler() {
// this.$store.commit("moduleA/changeName");
// },
...mapMutations(["changeName"]),
// handler2() {
// this.$store.dispatch("moduleA/actChangeName");
// },
...mapActions(["actChangeName"]),
},
beforeCreate() {}, // 生命周期 - 創建之前
// 生命周期 - 創建完成（可以訪問當前this實例）
created() {
console.log(this.$store);
},
};
</script>
本文來自博客園，作者：一粒金燦米，轉載請註明原文鏈接：https://www.cnblogs.com/zy-feng/p/16789560.html
