Vuex商店中多个琐碎突变的最佳实践是什么？

Question

在我的 Vuex 代码中，我有无数琐碎的突变，例如：

setOption(state, payload) {
    state.option = payload;
}

有数百行类似的代码，看起来并不好。有更好的选择吗？

Answer 1

选项 0（新推荐）

考虑切换到 Pinia，Vue 的新官方状态管理器。

突变不再存在。这些可以转换为操作，或者您可以直接分配给组件中的商店（例如userStore.firstName = 'FirstName'）

选项 1（旧推荐）

保持这种方式。

优点：

• 标准，有据可查。
• IDE 支持。您可以在整个项目中轻松找到某些突变的用法。
• 在需要时轻松添加更多逻辑，例如年龄应该是一个正数，等等......

缺点：

• 可能看起来重复，因此跳过一些重要的突变更容易。但是，这可以通过约定部分解决，将所有琐碎放在文件\节的末尾，一旦突变不再是不平凡的 - 将其移动到文件\节的顶部。

选项 2

使用universal mutation：

mutate(state, payload) {
   state[payload.property] = payload.with;
}

然后调用它：

commit('mutate', {
    property: <propertyNameHere>,
    with: <valueGoesHere>
});

优点：

• 干净的突变部分，重要的突变在视觉上是不同的。

缺点：

• 有点难找到相关的突变，例如有些可以在property: 之后有两个或多个空格
• 为每个突变调用编写更多内容。
• 与标准方式不完全兼容，因此您可以通过额外的逻辑以非平凡的突变结束，但有人可能会错过它并使用统一的突变调用。​​

选项 3

使用一些代码生成器，例如Hygen

优点：

• 您拥有与选项 1 相同的代码，包括 IDE 支持和未来扩展。
• 您可以将其设置为通过单个命令行在所有位置添加 - 状态、突变和操作（如果需要）。
• 使用 typescript 您还需要更改商店的界面，也可以使用相同的命令行来完成。

缺点：

• 可能很难设置。
• 需要新团队成员的更多信息。

选项 4

使用一些带有预定义突变的 Vuex 插件，例如this one

优点：

• 最少的设置。
• 干净的突变部分，重要的突变在视觉上是不同的。

缺点：

• 需要一些关于插件的知识。
• 找到相关突变有点困难
• 与标准方式不完全兼容，因此您可以通过额外的逻辑以非平凡的突变结束，但有人可能会错过它并使用插件提供的突变调用。​​