module是什么
store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
新建目录以及文件
- 在store目录下新建文件夹，modules文件夹（名字随意）
- 在modules文件夹下新建module1.js以及module2.js
modules1.js
const module1 = { state: { moudle1Value: 'module1-value', }, mutations: { changeModule1(state, newValue) { state.moudle1 = newValue }, }, getters: { getModules1(state) { return state.moudle1 } }, actions: { useActionChangeModule1({ commit }, newValue) { commit('changeModule1', newValue) }, } } export default module1
modules2.js
const state = { moudle2Value: 'module2-value', } const mutations = { changeModule2(state, newValue) { state.moudle2 = newValue }, } const getters = { getModule2(state) { return state.moudle2 } } const actions = { useActionChangeModule2({ commit }, newValue) { commit('changeModule2', newValue) }, } export default { state, mutations, actions, getters }
index.js
import Vue from "vue" import Vuex from "vuex" import module1 from "./modules/module1" import module2 from "./modules/module2" Vue.use(Vuex) const store = new Vuex.Store({ modules: { module1, module2 }, }) export default store;
使用
获取state
computed: { ...mapState({ module1: state => state.module1.moudle1Value， module2: state => state.module2.moudle2Value， }), },
获取getter
computed: { getModules1() { return this.$store.getters.getModules1; }. ...mapGetters(["getModules1"]) },
commit调用
changeModule1() { this.$store.commit("changeModule1", "new module 1"); }, ...mapMutations(["changeModule1"])
命名空间
为什么要有命名空间
vuex允许不同模块有重名的函数，
比如： this.$store.commit(“changeModule1”, “new module 1”);如果这这里的modules1和modules2模块都
有changeModule1这个函数，那么在commit的时候会导致，两个模块的这个重名函数都会调用。
所以都会命名空间来解决重名函数。
写法如下
const module1 ={ namespaced: true, ...... }
获取getter
...mapGetters("module1", ["getModules1"]) // 映射为 `this.$store.getters.common.getToken` // // 方式2 getModules1() { return this.$store.getters.module1.getModules1; }
commit调用
changeModule1() { this.$store.commit("module1/changeModule1", "new module 1"); }, ...mapMutations("module1", [ "changeModule1" // 将 `this.getTokenData()` 映射为 `this.$store.dispatch('common/getTokenData')` ])
dispath调用
changeModule1() { this.$store.commit("module1/useActionChangeModule1", "new module 1"); }, ...mapActions("module1", [ "useActionChangeModule1" ]) }
