如果直接获取/设置值，为什么我应该使用getter和mutations？

Question

两者之间有什么区别

this.currentLanguage = this.$store.getters.currentLanguage;

这对于吸气剂：

this.currentLanguage = this.$store.state.currentLanguage;

也是这样：

this.$store.commit('setLanguages', this.languages);

在突变中给我相同的结果：

this.$store.state.languages = this.languages;

两种情况下我都收到想要的东西。直接获得价值更容易，因为我不需要编写getter / mutation。 为什么我应该使用吸气剂/突变？

Answer 1

在这种情况下，您不需要使用吸气剂。 getter就像常规Vue组件上的计算属性一样，因此仅在数据是其他数据的更复杂后代时才需要它们。

您想使用突变，因为即使看起来this.$store.state.languages = this.languages正常工作，也不一定正确更新它。如果您有其他组件（取决于商店），则可能没有接收到新数据，因为它没有经过完整的突变过程。

Answer 2

使用突变时，您可以清楚地记录vue-devtools之类的变化。它还允许进行时间旅行调试。

调试时真的很棒。

状态vs吸气剂更多是灰色区域。我个人不希望考虑state或getter中是否包含某些内容。如果我需要get商店里的东西，可以使用getter。

Answer 3

Vuex文档本身很好地回答了这个问题：

  

同样，我们提交突变而不是直接更改store.state.count的原因是因为我们要明确跟踪它。这个简单的约定使您的意图更加明确，以便您在阅读代码时可以更好地推断应用程序中的状态更改。另外，这使我们有机会实现可以记录每个突变，拍摄状态快照甚至执行时间旅行调试的工具。 https://vuex.vuejs.org/guide/-接近底部

因此，基本的想法是明确跟踪更改。这使其他工具可以将自己附加到这些变异和动作上并跟踪您的代码，这对于大规模应用程序来说是一个巨大的好处。这还将使您的代码更具可读性，并且在以后的阶段更易于更新。读过一个旧项目，他们总是在旅途中进行更改，而没有一个“方法”-在这里不会发生。