直接在vuex中更改状态

Question

我确实没有在行动中设置状态的缺点。 Ok突变对于vue-devtools很有用，但还有其他功能吗？是否有任何代码示例显示障碍？

Answer 1

有一种更好的方法：

动作允许进行异步调用，这意味着您可以执行https请求，等待，应答和提交（调用变异）。

突变是同步的，因为这里是要更新状态的地方。

因此，如果您不需要异步调用，则可以直接从组件中调用变异：

// Using this.$store.commit()    
// some component
...
methods: {
  callAMutation() {
    const someValue = "Update the vuex state with this";
    // call the mutation without call an action
    this.$store.commit("theMutationName", somevalue);
    // if the store is using modules
    // this.$store.commit("moduleName/theMutationName", somevalue);
  }    
}
...

现在使用{ mapMutations }

// some component
<script>
import { mapMutations } from 'vuex';
...
methods: {
  ...mapMutations(["theMutationName"]), 
  // again, if you have a store with modules, use the next format
  // ...mapMutations({ aModuleMutation: "moduleName/theMutationName"})
  callAMutation() {
    const someValue = "Update the vuex state with this";
    // call the mutation without call an action
    // call the mutation ["theMutationName"] as a method
    this.theMutationName(somevalue);
    // if the store is using modules, call the mutation as a method
    // this.aModuleMutation(somevalue);
  }    
}
...
</script>

这样就减少了代码编写代码，因为不需要执行此操作，它对于使用存储的组件之间的共享代码很有用。

发生突变的原因是：现代状态管理工具的驱动需求之一是可追溯性 [https://blog.logrocket.com/vuex-showdown-mutations-vs-actions-f48f2f7df54b/]，突变允许知道状态在哪里，如何以及何时发生变化，这样您就可以跟踪状态组件正在调用某些动作或突变，调试大型应用程序可能会很痛苦。

但是...在其中的一项通俗易懂的课程中，我听达米安·杜里斯（Damian Dulisz）说，突变和动作将被合并，如果这样，您将直接在动作中设置状态。