vuex中modules的使用场景和注意事项-白红宇

store 拆分成 modules 过程

之前的项目一直是store下面放各种js文件（index.js、state.js、getter.js、mutation-types.js、mutations.js、action.js）; 如下图

└── store    ├── index.js          # 我们组装模块并导出 store 的地方    ├── actions.js        # 根级别的 action    ├── mutations.js      # 根级别的 mutation    ├── state.js          # 根级别的 state    └── getter.js复制代码

使用单一的状态树，应用的所有状态都会集中在一个比较大的对象上面，随着项目需求的不断增加，状态树也会变得越来越臃肿，增加了状态树维护的复杂度,而且代码变得沉长；因此我们需要modules来为我们的状态树分隔成不同的模块，每个模块拥有自己的state，getters，mutations，actions；而且允许每个module里面嵌套子module；如下：

└── store    ├── index.js          # 我们组装模块并导出 store 的地方    ├── actions.js        # 根级别的 action    ├── mutations.js      # 根级别的 mutation    ├── state.js          # 根级别的 state    └── modules        ├── module1.js   # 模块1的state树        └── module2.js   # 模块2的state树复制代码

模块module1.js内部的代码结构如下

import { WIDTH_ADD } from '@/store/mutation-types.js'  // 引入事件类型export default {    namespaced: true,    state: {        width: 100,        height: 50    },    getters: {        modulegGetWidth(state, getters, rootState) {            return state.width        },        modulegetHeight(state, getters, rootState) {            return state.height        }    },    mutations: {        [WIDTH_ADD](state) {   // 使用常量替代 Mutation 事件类型            return state.width++        },        addHeight(state) {    // 不使用常量            return state.height++        }    },    actions: {            }}复制代码

注册到根state。

index.js如下

import state from './state'import getters from './getters'import mutations from './mutations'import actions from './actions'import module1 from './modules/module1.js'  // 引入module1export default {    state,    getters,    mutations,    actions,    modules: {        module1  // 注册完成    }}复制代码

在组件内打印state。

console.log(this.$store.state)复制代码

如图

由上图，可以看到，module1已经被我们添加到了当前的store.state内;

需要注意的

Vuex在组件中computed中使用的时候，计算属性不能和state的数据项同名（同名了也不会报错，就是获取不了数据了）

有一点值得注意的是：当我们在组件的计算属性中使用module里面的getters的时候,计算属性不和state的数据项同名这条规则貌似不生效，具体原因还不知道，如果有知道的大佬帮忙指点一下

默认情况下，没有设置命名空间的时候，模块内部的 action、mutation 和 getter 是(除了state)注册在全局命名空间的（如果有重名就会报错 [vuex] duplicate getter key: [method]）——这样使得多个模块能够对同一 mutation 或 action 作出响应。

解决方法是加命名空间 namespaced: true

如何在页面里面引用module

在modules内的每个模块加入命名空间

namespaced: true复制代码

在vue文件内也可以这样

import { createNamespacedHelpers } from 'vuex'const { mapState, mapActions } = createNamespacedHelpers('mudole1')复制代码

注册到组件中

import { mapState, mapMutations } from "vuex"computed: {    ...mapState('module1', {        width: state => state.width,  // 关联, 此处的state 为 module1/state        height: state => state.height    })    },methods: {    ...mapMutations('module1', {  // 命名空间module1        widthAdd: 'WIDTH_ADD',  // 通过mutation-types.js        addHeight: 'addHeight'  // 直接加在mutations上面的方法    }),}复制代码

注册完成，使用

created() {    this.widthAdd()   // 将 `this.widthAdd()` 映射为 `this.$store.commit('module1/widthadd')`    console.log(this.width)  // this.width已经变为commit以后的值}复制代码

如何在模块中访问全局内容？

如果你希望使用全局 state 和 getter，rootState 和 rootGetter 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

其实这块，作者在文档中已经说明的很清楚了，具体的链接：

划分模块的好处

state更为容易管理，尤其在团队人数多的时候，自己负责自己的state，既保证store了完整的状态树，又避免了相互之间的state冲突

不管是命名，或是操作 state 都会变得更加扁平和直观