Vuex提供了用于处理数据的便捷工具，但是某些开发人员并不一定总是将其用于预期目的，或者创建冗余结构以使可能更清晰，更简洁地编写代码，而当开发人员仅熟悉这些工具时，也会发生这种情况。 本文将提供一些用于组织可应用于您的工作的吸气剂的准则。
吸气剂是Vuex存储库（计算属性）的一部分，更具体地说。 它们使您可以接收例如通过某些参数过滤的数据。 但是有些开发人员从字面上使用了此工具的名称，并开始使用它代替直接从state获取数据。 从这里开始是使用吸气剂的第一个错误。
使用吸气剂轻松地从存储中检索数据
让我们看一个简单的代码示例：
state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, },
吸气剂的这种用法很常见，这很不好。 要访问组件中的状态，只需在计算中创建一个计算值，例如：
computed: { films() { return this.$store.state.films; }, },
或者使用mapState一个更方便的选项：
computed: { ...mapState(['films']), },
采取这种获取数据的方法，那么您就不会在代码中增加多余的代码。
恕我直言：许多人使用mapState混合并创建返回状态的计算值。 要创建统一的代码，请对每个值使用mapState和其他工具，因为您的代码将变得更加统一，并且您可以更快，更方便地进行更改，例如，如果您必须显示另一个值。
为单个用例过滤器创建吸气剂
假设您需要观看一部詹姆斯·邦德电影，对于某些特定情况，您可能需要这样做：
getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, },
无需这样做，最好再次转到mapState并执行以下操作：
computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), },
实际上，您只是将特定的过滤器转移到需要它的组件，该示例非常抽象，但是我在实践中经常遇到它。
使用参数创建吸气剂
这种使用getter的方法非常方便且通用，但是我们不能忘记getter是计算的属性并且已被缓存。 这并不意味着您根本无法使用它，而是最好再考虑一下是否使用它。 看一个例子：
getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, },
事实是，通过这样的调用，您说每次都需要重新计算getter的结果，然后将其提供给您。 如果需要组装此结构，则可以执行以下操作：
getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, },
在这种情况下，仅在数据更改的情况下才会进行重新计算，并且您可以将id称为对象的键。
总结一下
- 不要使用getter进行简单的数据检索，也不需要使用包装器将代码复杂化以进行简单的操作
- 不要为只需要使用一次的特定过滤器创建吸气剂，吸气剂的主要思想是获取派生状态，但是您无需将组件逻辑转移到存储逻辑
- 参数化的吸气剂失去了其主要特性-可缓存性，以这种方式使用它们之前请三思
- 充分利用mapState，请记住，可以使用该组件执行组件的大多数特定任务
- 使用mapGetters，这是间接说的，但是均匀性总比没有好
如果您尚未打开Vue和Vuex的文档，那么本文是为初学者和困惑的开发人员撰写的 ，首先您要去研究Hub上有关该问题的信息，然后按照上面的链接并开始阅读它们，然后使用来自各种来源的技巧。