小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在我们创建好Store实例后，我们在组件中应该怎么使用它呢，我们除了通过$store来获取，还可以通过辅助函数使用，所以这篇来讲讲Store的辅助函数。

辅助函数

mapState

为组件创建计算属性以返回 Vuex store 中的状态。也就是获取state状态，那是因为当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，使用如下：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

调用时，也可以使用对象展开运算符，如下：

export default {
  // ...
  computed: {
      ...mapState({})
  }
}

mapGetters

为组件创建计算属性以返回 getter 的返回值。

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

我们需要注意的是：mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

总结

这里建议使用对象展开运算符（即 ...）的形式来使用mapState和mapGetters，这样方便我们的阅读和维护。

想了解更多文章，传送门已开启：回首Vue3目录篇 ！