怀化市住房与城乡建设厅网站,wordpress 地理定位,房地产手机端网站建设,设计网站企业网站建设公司一、情景说明
通过前面的学习#xff0c;我们知道#xff0c;Vuex的核心文件就是indexc.js 这个文件里面#xff0c;主要是四个对象 actions、mutations、state、getters
那么#xff0c;随着业务的复杂化#xff0c;所有的逻辑都写在一个actions里面吗#xff1f; 显然…一、情景说明
通过前面的学习我们知道Vuex的核心文件就是indexc.js 这个文件里面主要是四个对象 actions、mutations、state、getters
那么随着业务的复杂化所有的逻辑都写在一个actions里面吗 显然不是。
这次就来学习下如何实现Vuex的模块化编码 根据业务情况进行划分 这样的好处显而易见
二、案例
编码思想大概是这样的 我们根据业务情况对Vuex的配置进行划分模块 然后将相应的业务配置独立到一个js文件中并命名成相关业务名称 再在index.js文件中进行import导入这些独立出来的js业务配置文件 在通过modules关键字进行引用即可。
count.js文件求和相关的配置 关键配置namespaced:true
//求和相关配置
export default {namespaced:true,actions:{jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}},mutations:{JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value}},state:{sum:0, //当前的和school:中国,subject:Vue,},getters:{bigSum(state){return state.sum*10}},
}person.js文件人员列表相关的配置 关键配置namespaced:true
import axios from axios
//人员管理相关配置
export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf(王) 0){context.commit(ADD_PERSON,value)}else{alert(添加的人必须姓王)}},addPersonServer(context){axios.get(https://api.uixsj.cn/hitokoto/get?typesocial).then(response {context.commit(ADD_PERSON,{id:nanoid(),name:response.data})},error {alert(error.message)})}},mutations:{ADD_PERSON(state,value){console.log(mutations中的ADD_PERSON被调用了)state.personList.unshift(value)}},state:{personList:[{id:001,name:张三}]},getters:{firstPersonName(state){return state.personList[0].name}},
}
index.js中引入count.js和person.js文件 关键配置modules
//该文件用于创建vuex中最为核心的store//引入Vue
import Vue from vue
//引入Vuex
import Vuex from vueximport countOptions from ./count
import personOptions from ./personVue.use(Vuex);//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
});vc组件中使用配置 1、常规写法 关键编码 带上personAbout this.$store.state.personAbout.personList this.$store.commit(personAbout/ADD_PERSON,personObj) computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum},firstPersonName(){return this.$store.getters[personAbout/firstPersonName]}},methods: {add(){const personObj {id:nanoid(),name:this.name}this.$store.commit(personAbout/ADD_PERSON,personObj)this.name },addWang(){const personObj {id:nanoid(),name:this.name}this.$store.dispatch(personAbout/addPersonWang,personObj)this.name },addPersonServer(){this.$store.dispatch(personAbout/addPersonServer)}},2、实用mapXxx写法 computed:{//借助mapState生成计算属性从state中读取数据。数组写法...mapState(countAbout,[sum,school,subject]),...mapState(personAbout,[personList]),//借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters(countAbout,[bigSum])},methods: {//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations(countAbout,{increment:JIA,decrement:JIAN}),//借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions(countAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait})},
