Vuex模块化与命名空间namespaced
- 目的:为了让代码更方便维护,让Vuex中不同业务类型涉及到的数据进行分类,同时可以避免不同业务数据分类间的命名冲突问题
- Vuex模块化代码如下:
// 引入vue import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' // 使用Vuex Vue.use(Vuex) // 注册第一个countAbout模块 const countAbout = { // 重点:开启命名空间 namespaced: true, state: {}, actions: {}, mutations: {}, getter: {} }, // 注册第一个personAbout模块 const personAbout = { // 重点:开启命名空间 namespaced: true, state: {}, actions: {}, mutations: {}, getter: {} } // 创建并且导出store export default new Vuex.Store({ modoles: { // 第一个模块挂载 countAbout, // 第二个模块挂载 personAbout } })
Vuex模块化读取state、getters数据,调用dispatch、commit
读取state数据
- 开启命名空间后,在组件中读取state数据
// 方式一:通过$store.state读取 this.$store.state.Vuex模块化名称.数据属性名 // 方式二:通过mapState方式简写读取 computed: { ...mapState('Vuex模块化名称', ['数据属性名', ...]) }
读取getters数据
- 开启命名空间后,在组件中读取getters数据
// 方式一:通过$store.getters读取 this.$store.getters['Vuex模块化名称/getters数据名'] // 方式二:通过mapGetters方式简写读取 computed: { ...mapGetters('Vuex模块化名称', ['getters数据名', ...]) }
调用dispatch
- 开启命名空间后,在组件中调用dispatch
<!-- 调用incrementOdd,并传参为num --> <span @click="incrementOdd(num)"></span> // 方式一:通过$store.dispatch this.$store.dispatch('Vuex模块化名称/Actions中的方法名称', value) // 方式二:通过mapActions方法简写 methods: { ...mapActions('Vuex模块化名称', {incrementOdd: 'Actions中的方法名称', ...}) }
调用commit
- 开启命名空间后,在组件中调用commit
<!-- 调用increment,并传参为num --> <span @click="increment(num)"></span> // 方式一:通过$store.dispatch this.$store.commit('Vuex模块化名称/Mutations中的方法名称', value) // 方式二:通过mapMutations方法简写 methods: { ...mapMutations('Vuex模块化名称', {increment: 'Mutations中的方法名称', ...}) }