Vuex 从动作中访问 Getter

在 Vuex 中，我们可以在任何地方进行 store 的状态访问，包括组件以及其它非组件模块。绝大部分状态访问都可以通过 Getter 工具函数完成，例如：

// 定义 getter
const store = new Vuex.Store({
  state: {
    count: 1
  },
  getters: {
    getCount: state => state.count
  }
})

// 访问 getter
console.log(store.getters.getCount)

通常情况下，我们在组件中通过 mapGetters 将 getter 映射为计算属性使用：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getCount'
    ])
  }
}

但有时候，我们需要在一个动作中使用 getter 获得状态信息。比如，你可能已经知道了 Vuex 要求我们必须使用动作来进行异步状态修改，因此，“从动作中访问 getter” 是一种非常常见的需求。

如果你熟练 Vuex 状态管理模式，那么你一定知道改变 store 的状态必须通过提交一个 mutation，即单向数据流实现的状态管理模式不支持直接修改 store 的状态（这是 Flux 思想的核心思路）。而 mutation 只能同步执行，如果我们需要异步计算一些状态值并提交 mutation 进行状态修改，则必须借助动作来实现：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  getters: {
    getCount: state => state.count
  },
  mutations: {
    incrCount: state => state.count++
  },
  actions: {
    doSomething({commit, getters}) {
      // 获得状态
      const count = getters.getCount
      
      // 异步计算当前状态值
      const newCount = count + 1
      
      // 提交 mutation 修改状态
      commit('incrCount')
    }
  }
})

可以看到，利用动作中的参数对象的 getter 属性，我们很方便地获得了当前 store 的状态值，并可以利用其进行异步计算。这只是一个非常简单的例子，实践中你可以利用这个特性进行很多复杂的业务逻辑处理。