vuex中的module使用的是单一状态树,应用的所有的状态都会集中到一个比较大的对象中,当应用变得非常复杂时,store就会变得非常臃肿。为了解决以上问题,vuex允许我们将store分割成模块,每一个模块都拥有自己的state,mutation,action,getter,甚至嵌套子模块。

一、module的基本使用

vuex调用modules方法 vuex中module_modules


二、modules的局部状态参数

子模块中的getters中的参数

vuex调用modules方法 vuex中module_modules_02


子模块中的mutations中的参数

vuex调用modules方法 vuex中module_vuex_03


如上图所示,子模块中mutations中存在两个参数,一个是当前模块对象的state对象,另一个是调用该函数的参数。

子模块的actions对象

vuex调用modules方法 vuex中module_vuex调用modules方法_04


如上图所示,在子模块中actions中存在两个参数,一个是context,另一个是传入的参数payload

第一个参数context是一个对象,其中包含了commit,dispatch,getters,rootGetters, state,rootState

三、module的命名空间

vuex调用modules方法 vuex中module_modules_05

如上图所示,我们存在一个root模块,两个子模块,分别为home,about,此时三个模块中都存在方法increment和异步方法incrementAsync,当我们点击按钮时,此时三个模块的都会发生改变。原因是当点击按钮时,三个同名函数都会执行,我们也可以理解为子模块的mutation的方法注册在全局空间。actions也是同样的道理。对于getters来说,如果子模块中的getters和父模块的getters出现冲突的问题,从图上可以知道,会使用root下的来替换。

namespaced:我们可以在子模块中设置namespacedtrue,也就是设置局部命名空间。

vuex调用modules方法 vuex中module_modules_06


如上图所示,此时就解决了root模块和子模块之间getters,mutations,actions之间的冲突问题。

四、module修改或者派发组件

我们希望在actions中修改root中的state,可以使用如下所示

vuex调用modules方法 vuex中module_vuex调用modules方法_07


五、module的辅助函数

关于module的辅助函数存在三种写法。

方法一

vuex调用modules方法 vuex中module_vuex调用modules方法_08


方法二

vuex调用modules方法 vuex中module_vue.js_09


方法三:使用createNamespacedHelpers

vuex调用modules方法 vuex中module_面试_10


六、在setup中使用createNamespacedHelpers

vuex调用modules方法 vuex中module_vuex_11

上面为封装的代码。