Vuex 允许我们编写插件,每当提交突变时都会做一些事情。有没有办法拥有类似的功能,但有操作?
我注意到您可以像 vuexfire 库一样"增强"操作,这是最好的方法吗?
我的目标是有某种方法来跟踪当前是否/有多少 ajax 调用挂起,并根据该数字自动显示某种动画。
编辑:澄清一下,我想知道是否有办法仅使用 Vuex 来做到这一点,而无需拉入其他库。
从 Vuex v2.5 开始,你可以调用 subscribeAction
来注册一个回调函数,该函数将在存储区中每个调度操作后调用。
回调将接收一个action
描述符(具有 type
和 payload
属性的对象)作为其第一个参数,存储的state
作为第二个参数。
这方面的文档在 Vuex API 参考页面上。
例如:
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>
从 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