Vuex this.$store 的其他实现

前言

前面两篇文章，讲解了 vuex 的一些基本操作。其中提到几个方法，一是组件访问 state，使用this.$store.state；二是组件触发 mutations 使用this.$store.commit；三是组件触发 actions 使用 this.$store.dispatch；四是访问 getters 使用 this.$store.getters。这些只是访问 store 的一种方式。

访问 store 还有一种方法，就是使用模块化，将 store 中的各个部分导入组件，其实就是mapState、mapGetters、mapMutations、mapActions四个方法的使用。

state 与 getters

在之前的“起步”一文中，讲到 store 中的数据在任何组件修改后都会在 store 进行同步更新并发射给各个组件。这其实就是 Vue 的数据响应性。在之前，我们并没有提及 state 的一个关键的使用方法——计算属性中使用，而是直接使用了 this.$store.state方法访问全局状态。这本没有什么错误，但如果你嫌每次都要多打几个单词很麻烦，就可以用到计算属性了。

计算属性 computed 的强大之处在于，它可以对响应式数据进行缓存，可以节约很大一部分性能。它只会在数据更新后执行某些方法，如果数据没有发生改变则直接返回结果，不会重复执行计算。

那么，将 state 中的状态放在 computed 中无疑是一个非常好的选择。

computed: {
  count () {
    return this.$store.state.conut
  }
}

到这里，你觉得很不错了。但问题在于，如果状态多且杂时，computed 里也会变得非常臃肿，不利于你去处理其他必要的逻辑。你也许觉得，那还是直接使用this.$store.state吧。但 Vuex 为我们提供了另一个好用的访问 store 的方法。就是前面提到的 mapXXXX 方法。

// 访问 state 与 getters 
// 首先在 script 顶部引入 mapState 与 mapGetters 函数

注意，map 函数里是一个数组，且每一项状态的名字都是字符串。使用这种方法，有再多的状态也可以快速映射到组件里，并且 computed 属性里十分干净整洁，也不用再重复敲击 this.$store了。

mutations 与 actions

与 state、getters 不同，mutations 与 actions 是改变状态的方法，所以这二者是在 methods 里使用。同样的，先引入mapMutations与mapActions：

如果需要触发 mutations 与 actions 里的函数，直接使用 this 调用即可：

methods: {
  ...mapMutations(['SaveCount'])
  ...mapActions(['SaveCountAsync'])
  submit () {
    // 直接调用即可，有需要传递的参数，直接传递
    this.SaveCount(可选传递的参数)
  }
}

后记

map 方法有着一定的便捷性，但每个组件都要引入这几个方法确实比较麻烦，直接使用this.$store有着更高的效率。但这几个方法并没有太大的区别，使用什么完全取决于你的选择。

相信大多数人会选择后者，但某些时候，mapState 与 mapGetters 确实比较方便，在状态的访问上会少写很多代码。但也有人认为使用$store会让人一看到这个数据就知道是全局状态，利于区分全局状态与局部状态。

还是那句话，这两种方法说不上孰优孰劣，如何使用完全看你的喜好。