数据共享
数据共享：相同数据在多组件中使用
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'})
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4934.html
