VueX 模块化和namespace

当我们的项目很大的时候，VueX中的代码会越来越多，会有处理数据的，处理人员列表的，处理订单的...

如果我们将这些东西都写在一个state、actions和mutations中的话，就非常不方便后期的维护。

所以我们引入了VueX的模块化的概念，每一个模块存储对应操作的数据和方法，方便后期的维护。

一、创建模块化

我们将不同功能区间组成不同的模块，每一个模块中都有与之对应的state, getters, actions, mutations。

{

        namespace:true,

        actions:{},

        mutations:{},

        state:{},

        getters:{}

}

我们也可以将一个模块放在一个js文件中进行暴露，然后在index.js中引入

二、注册模块

export default new VueX.Store({

        modules:{ 模块1, 模块2 }

})

三、读取模块中的数据

（一）读取state中的数据

1. 直接读取

this.$store.模块名.数据名

 

2. mapState读取

...mapState("模块名", ["数据1", "数据2"])

 

（二）读取getters中的数据

1. 直接读取

this.$store.getters["模组名 / 数据名"];

2. mapGetters读取

...mapGetters("模块名", ["数据1", "数据2"])

 

（三）调用dispatch

1. 直接读取

this.$store.dispatch("模块名 / 方法名", value)

2. mapActions读取

...mapActions("模块名",  {新方法名1 : "方法名1",  新方法名2 : "方法名2"})

 

（四）调用commit

使用方法和调用dispatch一致

1. 直接读取

this.$store.commit("模块名 / 方法名", value)

2. mapMutations读取 

...mapMutations("模块名",  {新方法名1 : "方法名1",  新方法名2 : "方法名2"})