vuex的模块化+命名空间
1. 目的:让代码更好维护,让多种数据分类更加明确.
2. 创建person.js
import axios from "axios"
import { nanoid } from "nanoid"
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(
resp => {
context.commit('ADD_PERSON', { ID: nanoid(), name: resp.data })
},
error => {
console.log(error);
}
)
}
},
mutations: {
ADD_PERSON(state, personObj) {
state.personList.unshift(personObj)
}
},
state: {
personList: [
{ id: '001', name: '张三' }
]
},
getters: {
firstPersonName(state) {
return state.personList[0].name
}
},
}
3. 修改store.js
import Vuex from 'vuex'
import Vue from 'vue'
import personOptions from './person'
import countOptions from './count'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
countOptions:countOptions,
personOptions:personOptions,
}
});
4. 开启命名空间后,组件读取state数据
this.$store.state.personOptions.personList
...mapState('countOptions',['sum','school'])
5. 开启命名空间后,组件读取getters数据
this.$store.getters['personOptions/firstPersonName']
...mapGetters('countOptions',['bigSum'])
6. 开启命名空间后,组件中调用dispatch
this.$store.dispatch('personOptions/addPersonWang',person)
..mapActions('personOptions',['addPersonWang'])
7. 开启命名空间后,组件中调用commit
this.$store.commit('personOptions/ADD_PERSON',person)
...mapActions('personOptions',{addPerson:'ADD_PERSON'})