在 Vuex 的每个动作之前调用 mutation

Question

Vuex 允许我们编写插件，在提交突变时执行某些操作。有什么方法可以有类似的功能，但有动作吗？

我注意到您可以 "enhance" 像 vuexfire library 那样的操作，这是最好的方法吗？

我的目标是找到一些方法来跟踪 if/how 许多 ajax 呼叫当前未决，并根据该数字自动显示某种动画。

编辑：澄清一下，我想知道是否有一种方法可以只使用 Vuex 来做到这一点，而无需引入其他库。

Answer 1

从 Vuex v2.5 开始，您可以调用 subscribeAction 来注册一个回调函数，该函数将在商店中的每个分派操作之后调用。

回调将接收一个 action 描述符（具有 type 和 payload 属性的对象）作为其第一个参数，并接收商店的 state 作为第二个参数。

此文档位于 Vuex API Reference page。

例如：

const store = new Vuex.Store({
  plugins: [(store) => {
    store.subscribeAction((action, state) => {
      console.log("Action Type: ", action.type)
      console.log("Action Payload: ", action.payload)
      console.log("Current State: ", state)
    })
  }],
  state: {
    foo: 1
  },
  mutations: {
    INCREASE_FOO(state) {
      state.foo++;
    },
  },
  actions: {
    increaseFoo({ commit }) {
      commit('INCREASE_FOO');
    }
  }
});

new Vue({
  el: '#app',
  store,
  methods: {
    onClick() {
      this.$store.dispatch('increaseFoo');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>

<div id="app">
  Foo state: {{ $store.state.foo }}
  <button @click="onClick">Increase Foo</button>
</div>

Answer 2

从 3.1.0 开始，subscribeAction 还可以指定订阅处理程序是在动作派发之前还是之后调用（默认行为是之前）：

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})

文档：https://vuex.vuejs.org/api/#subscribeaction

在 Vuex 的每个动作之前调用 mutation

Call mutation before every action Vuex

ajax

action

vue.js

vuex