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来引用对应模块的数据。