We’ll find out if we take everyone to try it. But mutations are just an agreement.

First, try mutations.

mutations: {
    updateData(state, obj) {
     // Everyone says mutations can't be used for asynchronous requests
      setInterval(() = > {
        state.age++
      }, 3000)
      console.log(state, obj)
    }
  },
Copy the code

Mutations resolution:

  • It can be processed asynchronously, and no errors are reported in normal mode.
  • In strict mode: An error is reported and data is normally modified.

-dectools: The state change cannot be monitored. Because mutations will not be requested after an asynchronous request for a state change. The DECTools tool simply listens for changes in data based on how many times mutations are executed. Synchronization is not an issue.

actions

 actions: {
    updateMutations(context, payload) {
      context.state.age++
      console.log(context, payload)
    }
  },
Copy the code
  • Actions just change the state and see what happens.
  • Data can be changed normally, and no errors will be reported in non-strict mode.
  • Strict mode error, data changes normally.
  • The devTools tool does not trigger changes

getters

getters: {
    data(state) {
      state.age = 112
      return state.age
    }
  }
Copy the code

Mutations cannot change the status of any results after getters is changed. This can’t be listened on by DevTools.

Summary: in fact, asynchronous changes actions directly change, or components directly change the state, in fact, can be, but strict mode returns an error. However, state changes are not affected. But you are officially recommended to do so. Also, devTools doesn’t listen for data changes. There is also the fact that the data is changed in this way as you normally modify the data is no different.