vuex mapGetters 是否值得使用？

Question

所以我相信标题介绍了我的问题。鉴于您在每个要使用 mapGetters 的组件中引入了一个新的依赖项，这会增加您的包的膨胀。

这也意味着您的组件现在专门绑定到 Vue，如果您将组件移植到另一个框架（如 React），这又是一件需要应对的事情。

考虑这 2 个计算的属性列表：

import { mapGetters} from 'vuex'
    computed: {
        ...mapGetters({
          active:'interface/active',
          mode:'interface/mode',
          views:'interface/views',
        }),
    }

对比

computed: {
      active:() { return this.$store.getters['interface/active'],
      mode:{ return this.$store.getters['interface/mode']},
      views:{ return this.$store.getters['interface/views']},
}

当然后者有点冗长，但并不过分糟糕。在这两种情况下，您仍然以相同的方式获得所有 getter 数据。为了节省几个字符的小好处，这似乎是完全不必要的绒毛。

前一个例子的权重为 207B（201 个字符）

而后面的示例权重为 207B（201 个字符）。

对我来说，这意味着在类型节省方面，几乎可以 none 获得。但是我确实承认前者更具可读性、可移植性并且最终更易于维护，因为您的相关数据都集中在一个地方。

Answer 1

关于您对辅助函数的看法，我认为有几件事值得一提，例如 mapGetters

如果您决定导入 mapGetters，关于您的代码与 vuex 紧密耦合：应该澄清的是，您直接访问 this.$store.getters 的方法不会' 使您的代码与 vuex 的耦合度降低。毕竟，这种直接访问已经对 store 的功能以及它们如何暴露给组件做出了很多假设。

以您提供的片段为例，已经可以看出您的商店实现a)有一个概念叫getters， b) 它支持模块，因此您可以像以前那样定义 interface 模块。

假设有一天，您以某种方式决定将 store 的实现切换为 puex, which has absolutely no concept of either getters or modules, you will have to refactor all 3 declarations anyway. Or even if you decide to switch to something more advanced like Flure 之类的实现，它也会使您处于类似的情况：尽管 Flure 具有 getter 和模块的概念，它们的暴露方式与 vuex 不同，因此您必须（再次）编辑所有 3 行。

更不用说移植到 React 了，计算属性中的代码甚至无法移植到专门为 Vue 创建的其他商店库。所以，真的，你不应该太担心使用 mapGetters.
其次，为了节省类型，如果您无论如何都不打算重命名这些属性，您的 mapGetters 调用实际上可以缩短为一行：

computed: {
  ...mapGetters('interface', ['active', 'mode', 'views']),
}

第三，一旦你开始有多行这样的声明，就更容易跟踪所有声明（例如，你从每个模块公开了多少 getters 或 state 字段）。因此，如果使用得当，这些辅助函数实际上有助于提高可维护性。

computed: {
  ...mapState('interface', ['list', 'packages']),
  ...mapGetters('interface', ['active', 'mode', 'views']),
  ...mapGetters('foo', ['bar', 'baz']),
}

第四，关于包的大小，我转念一想，我相信这可能是人们对你投反对票的主要原因。所以，我会试着解释一下：

您需要了解的是，如今现实世界的生产网络应用程序使用 webpack 等构建工具来创建 javascript 包。正因为如此，您编写的 javascript 几乎可以视为 source code，这与捆绑包中提供的代码完全不同。它们如此不同的原因是捆绑包可以利用这两种 minify and gzip 技术来实现文件大小的显着改善（通常在实践中减少 70% 以上的大小）。

换句话说，对于如今的 webapps，javascript 而不是 按原样提供，但几乎总是由 webpack 或像。因此，您在 source code 上进行的所有字符计数根本不会对最终的捆绑包大小产生明显影响。正因为如此，有些人可能会认为您的担忧是一种极其糟糕的微优化形式，因此他们会投反对票。

如果我是你，我会尽可能多地使用这些辅助函数，并在自动构建优化后查看包大小，然后再担心包大小全部。即使最终的包大小对您来说太大了，我几乎可以保证您不会从 mapGetters 重构中获益太多，因为通常其他东西会大大增加包的大小（比如视图组件库，例如）。真的，vuex 上的过早优化真的不值得你麻烦。

所以，对我来说，这些功能（mapState、mapGetters、mapActions、mapMutations）绝对值得使用。

vuex mapGetters 是否值得使用？

Are vuex mapGetters even worth using?

state-management

vue.js

vuex