Vuex中的模块化Modules与开辟命名空间

 当数据量、任务量很庞大时，所有状态，方法全部堆积在state仓库里，实先各个功能对应的代码逻辑分散，不利于阅读和修改，这时我们可以将store分割成一个个模块，每个模块内都有自己的状态、方法等，我们在使用时只需要在子模块中导出，在父模块中导入即可。

store/index.js

 import Vuex from "vuex"
import Vue from "vue"
import loginUser from "./loginUser"

Vue.use(Vuex)
const store = new Vuex.Store({
    modules:{
        loginUser
    },
})
export default store

如上图所示，在父模块index导入子模块loginUser后，还需要在store实例中配置modules选项，将我们使用的模块添加进去，这样子，我们就实现了模块化。

在使用时，模块过多不免会产生命名冲突。这时，我们可以为模块开辟命名空间。我们需要在模块内配置namespaced选项，将值设置为true。

namespaced: true

这时，当我们在模块外部调用模块内的函数时，就有所不同了

state

this.$store.模块名.数据名
...mapState("模块名",["数据名"])

getters

this.$store["模块名/属性名"]
...mapGetters("模块名",["属性名"])

mutations

this.$store.commit("模块名/方法名")
...mapMutations("模块名",["方法名"])

actions

this.$store.dispatch("模块名/方法名")
...mapActions("模块名",["方法名"])

当然，如果是在模块内部，模块名可以省略