Full-Stack Vue.js 2 and Laravel 5

Vuex actions

In Chapter 8, Managing Your Application State With Vuex, we discussed the key principles of the Flux pattern, including the principle that mutations must be synchronous to avoid race conditions that make our application data unpredictable.

If you have a need to include asynchronous code in a mutator method, you should instead create an action. Actions are like mutations, but instead of mutating the state, they commit mutations. For example:

var store = new Vuex.Store({
  state: {
    val: null  
  },
  mutations: {
    assignVal(state, payload) {
      state.val = payload;
    }  
  },
  actions: {
    setTimeout(() => {
      commit('assignVal', 10);
    }, 1000)
  }
});


store.dispatch('assignVal', 10);

By abstracting asynchronous code into actions we can still centralize ...