Vuex中mapState和mapGetters的区别。

以下是文档

mapState辅助函数

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

mapGetters辅助函数

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

以下我的想法

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

阅读 893
评论
    3 个回答
    • 12.1k

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

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

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

        • 768

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

          撰写回答

          登录后参与交流、获取后续更新提醒