Vuex中mapState和mapGetters的区别。

Question

以下是文档：

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键：

mapGetters辅助函数

mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

以下我的想法：

按照文档的说法，我使用mapGetters也能让我少按几次键，或者如果我直接使用mapState的话，mapGetters甚至getters都没有存在的意义了，因为我能直接获取到state，只要我不去修改它，我就可以一直使用this.$store.state,连getter函数都可以懒得写了，但事实并不是这样，这是我目前的困惑~

Answer 1

getter 可以帮助我们格式化数据，减少模版计算的复杂度。同时，getter 作为函数，可以直接传递和复用。mapGetters 可以帮助我们将 store 里的 getter 集成到当前组件，便于使用。

如果你只需要原始数据，你当然可以用 mapState，但这不代表 mapGetters 就没有意义了。如果你的项目不大，只用 mapState 当然是可能的，但是在大型项目里，多个组件共用一个格式化后的数据是很常见的，此时 mapGetters 就很有价值。

比如我老婆是南方人，不怎么吃面食，所以对我们饺子、菜蟒、菜盒、肉盒、菜卷、菜角之类的叫法嗤之以鼻。但是对于我们北方人来说，给每种食物以准确的称呼更有助于日常沟通。

Answer 2

其实你的问题是 get 的意义，我来抛砖引玉：https://zhuanlan.zhihu.com/p/...

对于 vuex 来说 mutation 就是 set, getter 就是 get

Answer 3

额，其实文档讲的很清楚了。无论是 mapState 还是 mapGetters，都是注入到当前的计算属性中。而后者存在的意义是对 state 的计算属性，本质是对 state 中的数据进行一些计算，比例如数据的修饰之类的，这其实是一个代码解耦的过程。而你描述的场景确实是只要 mapState，但是并不能说 mapGetters 没有存在的意义，只是你把 state 中的数据在 mutation 阶段就处理掉完了（计算），所以就用不到 getters 做计算，只需要直接访问 state。