vuex中的模块化(modules)和命名空间(namespaced)，以及四个辅助函数

目录

一、vuex的模块化---modules

1、vuex模块化的原因：

2、命名空间：

vue代码如下:

主仓库（store）

子store模块a，js文件

组件中使用vuex（store）：

二、vuex的四个辅助函数

首先在使用时需从vuex中导出辅助函数

1、…mapState：用于解构state中状态属性

2、…mapGetters：用于解构getters中定义的方法

3、…mapMutations：用于解构mutations中的方法，注意传参：在调用时直接传参

4、…mapActions：用于解构actions中的方法

---

一、vuex的模块化---modules

1、vuex模块化的原因：

        vuex维护的是一个单一的状态树，对于复杂的vue项目，若只有一个store，则该store就会非常臃肿难以维护，为了解决这个问题，vuex允许在vue项目中将store进行模块化的处理，即可以将一个大的store分解成若干个小的store，每个store都有自己的state、mutation、action、getter

2、命名空间：

（1）在默认情况下，模块内部的state、mutation、action、getter是全局的，即所有组件都可以使用

（2）若想让store有更好的封装性和复用性、在使用不会产生歧义，可以在store定义时加入 namespaced：true 配置，当模块注册后，所有的state、mutation、action、getter都会根据模块注册的路径调整命名

vue代码如下:

主仓库（store）

import Vue from 'vue'
import Vuex from 'vuex'
//导入子模块
import Counter from './modules/Counter';
import UserInfo from './modules/UserInfo';

Vue.use(Vuex)

export default new Vuex.Store({
   state: {},
   getters: {},
   mutations: {},
   actions: {},
   modules: {
    a:Counter,//子模块仓库a
    b:UserInfo//子模块仓库b
   }
})

子store模块a，js文件

const Counter = {
    namespaced: true,//开启命名空间
    state:{
        count:10,
        info:'这是一个计数器',
    },
    getters:{
        doubleCount(state){
            return state.count * 2;
        },
    },
    mutations:{//同步
        add(state){//count加
            state.count++;
        },
    },

    actions:{//异步
        asyncAdd(content){
            setTimeout(()=>{
                content.commit('add')
            },2000)
        }
    }
}
export default