一、情景说明
通过前面的学习,我们知道,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?type=social').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 'vuex'
import countOptions from './count'
import personOptions from './person'
Vue.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'})
},