Vuex模块化与命名空间namespaced

Vuex模块化与命名空间namespaced

1. 目的：为了让代码更方便维护，让Vuex中不同业务类型涉及到的数据进行分类，同时可以避免不同业务数据分类间的命名冲突问题
2. 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数据

1. 开启命名空间后，在组件中读取state数据

   // 方式一：通过$store.state读取
   this.$store.state.Vuex模块化名称.数据属性名
   
   // 方式二：通过mapState方式简写读取
   computed: {
       ...mapState('Vuex模块化名称', ['数据属性名', ...])
   }
   

读取getters数据

1. 开启命名空间后，在组件中读取getters数据

   // 方式一：通过$store.getters读取
   this.$store.getters['Vuex模块化名称/getters数据名']
   
   // 方式二：通过mapGetters方式简写读取
   computed: {
       ...mapGetters('Vuex模块化名称', ['getters数据名', ...])
   }
   

调用dispatch

1. 开启命名空间后，在组件中调用dispatch

   <!-- 调用incrementOdd，并传参为num -->
   <span @click="incrementOdd(num)"></span>
   
   // 方式一：通过$store.dispatch
   this.$store.dispatch('Vuex模块化名称/Actions中的方法名称', value)
   
   // 方式二：通过mapActions方法简写
   methods: {
       ...mapActions('Vuex模块化名称', {incrementOdd: 'Actions中的方法名称', ...})
   }
   

调用commit

1. 开启命名空间后，在组件中调用commit

   <!-- 调用increment，并传参为num -->
   <span @click="increment(num)"></span>
   
   // 方式一：通过$store.dispatch
   this.$store.commit('Vuex模块化名称/Mutations中的方法名称', value)
   
   // 方式二：通过mapMutations方法简写
   methods: {
       ...mapMutations('Vuex模块化名称', {increment: 'Mutations中的方法名称', ...})
   }