实际上在初始vuex和利用vuex批量生成代码时,我们就可以感受到vuex是一个用来共享数据的插件(Vue.use()中的内容我这里同一都把他们当插件)
vuex是用来集中式存储管理应用的所有组件的状态,他的厉害之处是在于,可以利用vue在浏览器中的插件,时时监测到数据的改变,并留下日志,这样就可以知道数据是何时被改,在哪里被改,而避免了之前共享数据时,任何一个举动改变了数据却无法调试的尴尬
下面介绍vuex的核心内容中的最后一个模块 modules
modules
在我们的store文件夹中,不像之前一样只使用index.js来控制Mutations...等,当我们的业务逻辑复杂起来后,选择采用模块化的方式将不同的模块分成不同的js文件,从而使他们有自己的Mutations...等,更方便的调试和维护代码
所以当我们选择在vuex中添加模块的时候,应该这样,将不同的状态以不同的js文件保存,从而减少代码的复杂度
//引入Vuex
import Vuex from 'vuex'
import countSum from './countSum'
import personMessage from './personMessage'
Vue.use(Vuex)
// 创建store,并暴露store
export default new Vuex.Store({
modules: {
countAbout: countSum,
personAbout: personMessage,
}
})
命名空间
在vuex的modules中,文件添加 命名空间 namespaced 使得模块中的代码有更高的复用性,此时他们的getters等函数会自动调整路径,同时使用的时候也要带好路径,此时就是局部函数,其他文件则可以重名,具体使用方法如下
先给modules的模块化文件添加 namespaced
export default {
namespaced: true,
...
}
接着在使用的时候,使用哪个文件的哪个函数都需要注明清楚,例如写出一个计算属性
computed: {
personList() {
return this.$store.state.personAbout.personList;
},
getFirstName() {
return this.$store.getters["personAbout/getFirstName"];
},
},
有时我们可以利用(.)的方式获取想要的属性,如第一行的函数,但有时我们又需要执行指定的函数,则需要参照下面一行的函数写,因为对象有两种取值方法
其中/前是模块名,/后是需要的函数名