网站内容如何建设,湖南平台网站建设哪里有,局域网电脑做网站,网站建设的目的包含哪些方面目的
让代码更好维护#xff0c;让多种数据分类更加明确#xff08;不同的模块挤在一个index.js中显得臃肿且不方便管理#xff09;
实现方式 修改store/index.js(也可以将不同模块分别写在不同的js文件中) const countAbout {//开启命名空间namespaced:true,actions:{..…目的
让代码更好维护让多种数据分类更加明确不同的模块挤在一个index.js中显得臃肿且不方便管理
实现方式 修改store/index.js(也可以将不同模块分别写在不同的js文件中) const countAbout {//开启命名空间namespaced:true,actions:{......},mutations:{......},state:{sum:0,},getters:{bigSum(state){return state.sum*10}}
}const personAbout {namespace true,//开启命名空间state {list:[xxx]},mutations {...},actions {...}
}const store new Vuex.Store({modules:{countAbout,personAbout}
})开启命名空间后组件读取各个模块的state数据 //方式一直接读取
this.$store.state.countAbout.sum
//方式二借助mapState读取
...mapState(countAbout,[sum,...])组件读取各个模块的getters数据 //方式一直接读取
this.$store.getters[personAbout/firstPersonName]
//方式二借助mapGetters读取
...mapGetters(personAbout,[firstPersonName])组件调用dispatch //方式一直接调用
this.$store.dispatch(personAbout/addPerson,value)
//方式二借助mapActions
...mapActions(personAbout,{addPerson:addPerson})组件调用commit //方法一直接调用
this.$store.commit(personAbout/ADD_PERSON,value)
//方式二借助mapMutations
...mapMutations(personAbout,{ADD_PERSON:ADD_PERSON})注意mapActions和mapMutation中无法填写函数参数需要在html组件的click方法声明中自己填写
