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'  // 引入module1

export 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 都会变得更加扁平和直观

vuex中modules的使用场景和注意事项

store 拆分成 modules 过程

你可能感兴趣的:(vuex中modules的使用场景和注意事项)