Call mutation before every action Vuex

Question

Vuex allows us to write plugins that do something whenever a mutation is committed. Is there any way to have a similar functionality, but with actions?

I notice you can "enhance" actions like the vuexfire library does, is this the best way to do so?

My goal is to have some way to track if/how many ajax calls are currently pending, and automatically show some kind of animation based on that number.

Edit: To clarify, I am wondering if there is a way to do this using just Vuex, without pulling into additional libraries.

Are you asking for a recommendation for a library/product, or how to do it yourself? — david25272
– david25272, Commented Nov 2, 2017 at 2:18
Sorry, how to do it myself. I have seen a few libs out there, most wrap all existing actions in an additional function to handle the mutation. At this point that seems the only option, but I wanted to check if anyone else has done something along these lines first. Redux, for example, allows this using it's middleware, although I guess Vuex does not. — lmiller1990
– lmiller1990, Commented Nov 2, 2017 at 4:06

thanksd · Accepted Answer · 2017-11-02 13:14:27Z

7

As of Vuex v2.5 you can call subscribeAction to register a callback function which will be called after each dispatched action in the store.

The callback will receive an action descriptor (object with type and payload properties) as its first argument and the store's state as the second argument.

The documentation for this is on the Vuex API Reference page.

For example:

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>

edited Nov 2, 2017 at 13:14

answered Nov 2, 2017 at 13:07

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lmiller1990 Over a year ago

perfect. I didn't know this was in vuex, relatively recent addition. Thanks!

Oleg Abrazhaev Over a year ago

what if I need to run something before and after every action? like setting loader status in active or inactive state

Ali Tokmakcı · Accepted Answer · 2021-09-22 10:41:11Z

1

Since 3.1.0, subscribeAction can also specify whether the subscribe handler should be called before or after an action dispatch (the default behavior is before):

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

documentation: https://vuex.vuejs.org/api/#subscribeaction

answered Sep 22, 2021 at 10:41

Ali Tokmakcı

1096 bronze badges

Collectives™ on Stack Overflow

Call mutation before every action Vuex

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related