
vuex module
随着使用数据的组件越来越多,vuex 中 state、getters、mutations、actions 里面的东西会不断增加,到一定程度后肯定会变得非常乱,就像从堆成山的快递中找你的快递一样。
况且快递都能划分到对应哪栋楼了,vuex 肯定也不会这么蠢,自然就引入了模块
为方便管理,我们在 src 目录下创建 store 文件夹用于存放所有的 vuex 文件,再创建两个模块 student 和 learn,顺便将 store 文件改名为 index 标记为入口文件。

将原先 store 中对应组件使用的东西丢进组件对应的模块中


然后在我们的入口文件中引入这两个模块

需要注意的是,像这样划分完模块后,state 会放入到每一个模块下,getters、mutations、actions会直接放入到全局,所以获取 state 中的状态的方式有所变化。
获取 state:this.$store.state.moduleName.xxx
获取 getters: this.$store.getters.xxx
获取 mutations:this.$store.commit('xxx')
获取 actions:this.$store.dispatch('xxx')
那么他们对应的工具呢,在划分模块后还能正常使用吗?
先来猜测一下,按理说 getters、mutations、actions 的正常使用都没有受到分模块的影响,那么他们的工具应该也不会受到影响。
来使用一下 mapGetters 试试:
在 learn 模块中定义一个 getters

然后在组件中使用 mapGetters 来调用 getters 中的 agePlus

mapGetters 正常运行!

那么再来试一试 mapState,按理说划分完组件后,组件对应的状态被放到了 state 里对应的组件中,那么再直接使用 mapState 应该是行不通的。


没错,是行不通的。

还是应该找到对应的模块,从模块里面拿才对,给 mapState 方法加上对应的模块

这回也没有成功,甚至还报了个错误,这个错误告诉我们在这个模块里面没有找到 namespace,也就是说模块是找到了,但是少了这么个 namespace

回到 learn 模块中,加上命名空间

mapState 获取到的东西有了,但是这回 mapGetters 的东西丢了,又报了个错


这时候在 Vue 里面的数据中可以看到,在 getters 中原先的 agePlus 变成了 learn/agePlus
也就是说在给模块设置命名空间后,getters 中对应的数据都会加上对应模块的名字

那么我们在 mapGetters 中也加上对应的模块名

这回就没有问题了

得出结论:
在划分模块后 mapGetters、mapMutations、mapActions 都可以正常使用,而 mapState 则需要给模块添加命名空间 namespaced:true 后指定模块进行使用。
但是在添加命名空间后,getters、mutations、actions 以及对应的 mapGetters、mapMutations、mapActions 都需要添加模块名进行使用。
最终结论
获取 vuex 中的数据(无 namespaced)
获取 state:this.$store.state.moduleName.xxx
获取 getters: this.$store.getters.xxx
获取 mutations:this.$store.commit('xxx')
获取 actions:this.$store.dispatch('xxx')
可以通过工具 mapXXX 方式拿到 getters、mutations、actions,但是不能拿到 state,需要添加命名空间 namespaced:true
获取 vuex 中的数据(有 namespaced)
获取 state:this.$store.state.moduleName.xxx
获取 getters: this.$store['moduleName/getters'].xxx
获取 mutations:this.$store.commit('moduleName/xxx')
获取 actions:this.$store.dispatch('moduleName/xxx')
可以通过 mapXXX:mapXXX('moduleName', ['xxx']) 和mapXXX('modulename', {}) 获取
建议使用带命名空间的方式。