深入理解vuex2.0 之 modules

深入理解vuex2.0 之 modules

在使用 Vuex 状态管理模式时，在项目逐渐庞大、复杂时，我们不可避免需要将 state、mutation、action 拆分成单独的模块，方便单独管理、解耦以及后期维护。这就需要使用 Vuex 的 modules 来进行管理。

使用 modules

我们可以将一个 store 分成多个模块，每个模块都有自己的 state、mutation、action、getter 等。为了演示方便，这里我们只取其中一个需要拆分的模块 - shoppingCart，该模块涉及到购物车商品的添加、删除等。

首先我们需要在 store 下新建一个 shoppingCart.js 文件，将 shoppingCart 的 state、mutation、action 都在这个文件下面管理。

shoppingCart.js

const shoppingCart = {
  state: {
    items: []
  },
  mutations: {
    addItem (state, payload) {
      state.items.push(payload)
    },
    removeItem (state, payload) {
      const index = state.items.indexOf(payload)
      state.items.splice(index, 1)
    }
  },
  actions: {
    addItem ({ commit }, payload) {
      setTimeout(() => {
        commit('addItem', payload)
      }, 1000)
    },
    removeItem ({ commit }, payload) {
      setTimeout(() => {
        commit('removeItem', payload)
      }, 1000)
    }
  },
  getters: {
    cartItemsCount (state) {
      return state.items.length
    }
  }
}

export default shoppingCart

这里我们将 shoppingCart 的 state 设置为一个 items 数组来保存购物车商品；mutation 设置为 addItem、removeItem 分别添加、删除 items 中的商品；action 设置相应的处理逻辑，我们已经将 addItem、removeItem 的操作放入 setTimeout 函数中，模拟异步请求的情况。

接下来在 store/index.js 中加载并使用该模块：

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import shoppingCart from './shoppingCart'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    shoppingCart
  }
})

我们在 modules 中加入 shoppingCart 模块，注意将其引入并注册到 Vue.use 的 Vuex 中。

在组件中使用 modules 中的 state、mutation、action

如果我们要在某个组件中使用 modules 中的数据，比如我们在 Home 组件中需要展示当前购物车里商品的数量，我们只需要如下书写即可：

<template>
  <div>
    <h2>Home</h2>
    <p>购物车里有 {{ cartItemsCount }} 个商品</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      cartItemsCount: 'shoppingCart/cartItemsCount'
    })
  }
}
</script>

这里我们使用 Vuex 提供的 mapGetters 工具函数，将 state 中的 cartItemsCount 映射到当前组件的 computed 属性上，对应的 getters 对象为 shoppingCart/cartItemsCount，其中 shoppingCart 为当前模块的名称。

在组件中使用 mapState 工具函数进行 state 的映射也类似：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      items: state => state.shoppingCart.items
    })
  }
}

以上是关于使用 Vuex modules 的简单演示，我们可以将各个模块分开管理来避免一个 store 过于臃肿。