VUEX模块化的基础应用，一看就会Vuex模块化的简单实用技巧分享，笔者也是第一次使用，觉得有必要，就记录了一下，如果真

Vuex模块化的简单实用技巧分享，笔者也是第一次使用，觉得有必要，就记录了一下，如果真的有帮助到你，是我的荣幸

为什么要使用vuex模块化？（官方回答）

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

1、目录结构

 -|store
 -|-|projectName // 项目目录
 -|-|-|modules // 模块文件夹
 -|-|-|-|modulesA.js // 模块A
 -|-|-|-|modulesB.js // 模块B
 -|-|-|index.js

2、index.js目录

 import Vue from 'vue'
 import Vuex from 'vuex'
 
 import modulesA from './modules/modulesA'
 import modulesB from './modules/modulesB'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     modulesA,
     modulesB
   }
 })

3、modulesA.js文件

 const state = {
   name: '模块A'
 }
 
 const getters = {
   getName(state) {
     return `这是${state.name}`
   }
 }
 
 const mutations = {
   updateName(state, data) {
     const { name } = data || {}
     
     state.name = name
   }
 }
 
 const actions = {}
 
 export default {
   namespaced: true,
   getters,
   state,
   actions,
   mutations
 }

4、moduleB.js文件

 const state = {
   name: 'moduleB',
   count: 0
 }
 
 const getters = {}
 
 const mutations = {
   updateCount(state, data) {
     const { count } = data || {}
 
     state.count = count
   },
 }
 
 const actions = {
   setCount(content, { count }) {
     const { commit } = content
     
     return new Promise((resolve) => {
       setTimeout(() => {
         commit('updateCount', { count })
         resolve()
       }, 500)
     })
   },
 }
 
 export default {
   namespaced: true,
   state,
   getters,
   actions,
   mutations
 }

export要记得加上namespaced: true这样如果两个模块有同名的方法或数据就可以用模块名来区分。
每个模块文件单独写自己的state，getters，actions，mutations最后export出来。

5、在vue文件中使用

 <template>
   
 </template>
 
 <script>
 /** vuex提供的辅助函数 */
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 
 export default {
   name: 'test',
   data() {
     return {}
   },
   computed: {
     /** 引入模块中的state的具体属性 */
     ...mapState({
       name: state => state.moduleA.name,
       nameB: state => state.moduleB.name, // 支持起别名
       count: state => state.moduleB.count
     }),
     
     /** 引入模块中getters的具体计算属性 */
     ...mapGetters({
       getName: 'moduleA/getName'
     })
   },
   
   mounted() {
     /** 使用模块中state */
     console.log('name:', this.name)
     console.log('nameB:', this.nameB)
 
     /** 输出模块中的getters */
     console.log('getName:', this.getName)
     
     /** 提交mutations */
     this.updateName({ name: 'test' })
     this.updateCount({ count: 1 })
     
     /** 分发actions */
     setCount({ count: 2 })
   },
   
   methods: {
     /** 引入模块中的mutations */
     ...mapMutations({
       updateName: 'moduleA/updateName',  
       updateCount: 'moduleB/updateCount'
     }),
 
     /** 引入模块中的actions */
     ...mapActions({
       setCount: 'moduleB/setCount'
     })
   }
 }
 </script>

从vuex中引入mapState，mapGetters，mapActions，mapMutations对应的映射出模块中的数据和方法，设置了namespaced: true后通过moduleA/des来引用对应模块的数据。