How to synchronous data and asynchronous data in Vuex state

Synchronous data and asynchronous data in Vuex state

In Vuex, data storage is mainly throughstateto implement, and the data modification is throughmutationsandactionsCome to manage.

mutationsUsed to modify the state synchronously, andactionsThis is used to process asynchronous operations and submit after the asynchronous operations are completed.mutationsto modify the status.

Synchronize data (State and Mutations)

State: Vuex'sstateThe attribute defines the status of the application.
It's similar to the componentdataproperty, but it is global and can be accessed by all components.

const store = new ({
  state: {
    count: 0
  }
});

Mutations：mutationsIt's modifiedstatethe only way to do it.
They must be synchronous functions, because Vuex's debugging tools rely on tracingmutationsorder of call.

const store = new ({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      ++;
    }
  }
});

Asynchronous data (Actions)

Actions：actionsUsed to handle asynchronous operations.
They can contain any asynchronous operations, such as API calls, and then submitted after the operation is completed.mutationsto modify the status.

const store = new ({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      ++;
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

the difference

Synchronous vs asynchronous：mutationsMust be synchronous, which meansmutationsAny operations performed in the processing function must be effective immediately. andactionsCan contain asynchronous operations, they can be submittedmutationsExecute asynchronous code before.
debug:becausemutationsIt is synchronous, and Vuex's debugging tool can accurately track state changes. Asynchronous operations may cause the time point of state change to be unclear, soactionsDon't modify the status directly, but submit itmutationsCome to modify.
Use scenarios: When you need to perform synchronization operations to modify the state, you should usemutations. When you need to perform asynchronous operations (such as API calls), you should useactionsand submit after the asynchronous operation is completedmutations。

Understand and use correctly in practical applicationsmutationsandactionsIt is critical to maintain consistency and maintainability of Vuex state management.

In this way, it is ensured that the state changes are predictable and can be effectively tracked and debugged.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.