获取 VueX 中发生的最后一个突变的名称答案

【问题标题】：Get the name of the last mutation that occured in VueX获取 VueX 中发生的最后一个突变的名称
【发布时间】：2020-03-05 05:09:42
【问题描述】：

我正在使用命名空间的 VueX 模块，并且在每个模块状态中都有处理程序来确定我的 API 调用是否已完成，并触发名为“MODULENAME_LOADING”的突变。当 API 调用完成时，它会触发其他突变以将数据设置为状态。我希望能够从父布局组件中搜索最后一个突变提交是否包含单词“LOADING”，但找不到获取最后一个突变名称的方法。

有没有办法从组件中检查最后一个突变是什么，还是我必须分别处理每个模块？

【问题讨论】：

嗨，欢迎来到 Stack Overflow。请阅读help pages，获取SO tour，了解how to ask good questions。最后学习如何创建Minimal, Complete, and Verifiable example

标签： javascript vue.js vuex

【解决方案1】：

Vuex 提供了一个subscribe 方法来允许 View 监听 Store 的变化（和 subscribeAction 的动作）。它看起来像这样：

...
data() {
  return { 
    unsubFn: null,
    lastMutation: null
  }
},
mounted() {
  this.unsubFn = this.$store.subscribe((mutation, state) => {
    this.lastMutation = mutation.type;
  });
},
beforeDestroy() {
  if(this.unsubFn) {
    this.unsubFn();
  }
}
...

这是一个基本的例子：https://codepen.io/Qumez/pen/oNNyexB

调用 subscribe 会返回一个允许您取消订阅的函数，您绝对希望这样做以防止在发生突变时触发重复操作。我更喜欢将它存储在 data() 函数中并在 beforeDestroy() 钩子中调用它。

【讨论】：

很高兴为您提供帮助。编码愉快！