在每个动作Vuex之前调用变异

时间:2017-11-02 01:08:48

标签: ajax vue.js action vuex

Vuex允许我们编写插件,每当提交变异时都会执行某些操作。有没有办法有类似的功能,但有行动吗?

我注意到你可以"增强"像vuexfire library这样的行为,这是最好的方法吗?

我的目标是有一些方法来跟踪当前待处理的ajax调用数量/数量,并根据该数字自动显示某种动画。

编辑:为了澄清,我想知道是否有办法只使用Vuex这样做,而不需要进入其他库。

1 个答案:

答案 0 :(得分:5)

从Vuex v2.5开始,您可以调用for ((i=2; i<=15; i++)); do curl ... "http://x.x.x.$i:8080/services/test" done 来注册一个回调函数,该函数将在商店中的每个调度操作后调用。

回调将接收subscribeAction描述符(具有actiontype属性的对象)作为其第一个参数,并将商店的payload作为第二个参数

此文档位于Vuex API Reference page

例如:

&#13;
&#13;
state
&#13;
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');
    }
  }
})
&#13;
&#13;
&#13;