数据共享
数据共享：相同数据在多组件中使用
vuex模块化
模块化+命名空间
目的： 让代码更好维护，让多种数据分类更加明确
修改store/index.js
// 该文件是准备vuex的核心 ==> store
// 引入Vue核心库
import Vue from "vue"
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)
//count模块
const countOptions = {
namespaced:true, // 开启命名空间
actions:{
... },
mutations:{
... },
state:{
},
getters:{
}
}
//person模块
const personOptions = {
namespaced:true, // 开启命名空间
actions:{
... },
mutations:{
... },
state:{
},
getters:{
}
}
// 创建并暴露store
export default new Vuex.Store({
modules:{
// 声明模块
countAbout:countOptions,
personAbout:personOptions
}
})
1）开启命名空间后，组件中读取state数据
//方式一： 自己直接读取
this.$store.state.personAbout.personList
//方式二：借助mapState读取
...mapState('countAbout',['sum','school','subject'])
2）开启命名空间后，组件中读取getters数据
//方式一： 自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取
...mapGetters('countAbout',['bigSum'])
3）开启命名空间后，组件中调用dispatch
//方式一： 自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions
...mapActions('countAbout',{
incrementOdd:'plusOdd',incrementWait:'plusWait'})
4）开启命名空间后，组件中调用commit
//方式一： 自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations
...mapActions('countAbout',{
increment:'PLUS',decrement:'MINUS'})