vue.js - vuex mapGetters 是否值得使用？

Question

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

这也意味着您的组件现在专门绑定(bind)到 Vue，如果您将组件移植到另一个框架(如 React)，那么还有一件事需要解决。

考虑这两个计算属性列表:

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 个字符)。

对我来说，这意味着在类型节省方面，几乎没有。但是我承认前者更具可读性、便携性并且最终更易于维护，因为您的相关数据都集中在 1 个位置。

Answer 1

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

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

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

假设有一天，你以某种方式决定切换 store的实现类似于 puex ，绝对没有 getters 的概念或 modules ，无论如何您都必须重构所有 3 个声明。或者即使你决定切换到更高级的东西，比如 Flure ，它也会让你陷入类似的情况:虽然 Flure 有 getter 和模块的概念，但它们的公开方式不同 vuex确实如此，因此您必须(再次)编辑所有 3 行。

更不用说移植到 React，你在计算属性中的代码甚至不能移植到其他专为 Vue 创建的商店库。所以，真的，你不应该太担心使用 mapGetters .

其次，为了节省类型，如果您无论如何都不打算重命名这些属性，您的 mapGetters call 实际上可以缩短为一行:

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

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

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

第四，关于捆绑包的大小，我认为这可能是人们对你投反对票的主要原因。所以，我将尝试解释:

您需要了解的是，如今实际生产的 Web 应用程序使用诸如 webpack 之类的构建工具。创建 javascript 包。正因为如此，你写的javascript几乎可以被视为source code ，这与捆绑提供的代码完全不同。它们如此不同的原因是捆绑包可以同时使用 minify and gzip 技术来实现文件大小的显着改善(通常在实践中减少 70% 以上的大小)。

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

如果我是你，我会尽量去拥抱这些辅助函数，看看bundle大小后 在完全担心包大小之前自动构建优化。即使最终的捆绑包大小对您来说太大了，我几乎可以保证您不会从 mapGetters 获得太多 yield 。重构，因为它通常是其他大大增加包大小的东西(例如 View 组件库)。真的，对 vuex 的过早优化真的不值得你费心。

所以，对我来说，这些函数( mapState 、 mapGetters 、 mapActions 、 mapMutations )绝对值得使用。