How to solve the problem 'Error: [vuex] do not mutate vuex store state outside mutation handlers.' when using vuex in a Vue application?

In Vue applications, using vuex is a common state management method. However, when using vuex, we may sometimes encounter such an error message: "Error: [vuex] do not mutate vuex store state outside mutation handlers." What does this error message mean? Why does this error message appear? How to fix this error? This article will cover this issue in detail.

The meaning of the error prompt

"Error: [vuex] do not mutate vuex store state outside mutation handlers" means that in vuex, the vuex state cannot be modified directly outside the mutation function. In other words, when we modify the value of the vuex state (i.e. state) in the application, we should not modify the value of the state directly, but through the mutation function.

This is because, in Vuex, state is the only data source and is a responsive object. When the value of state changes, the associated components will be automatically refreshed, thereby realizing real-time changes in data. If we directly modify the value of state, then this responsive mechanism will fail and the interface cannot be updated.

So, if this error message appears, it means that we have modified the state value directly in the code instead of modifying it through the mutation function. So, how to avoid this mistake? This requires us to pay attention to some rules when writing code.

How to avoid this error?

To avoid this error, you need to follow the following two rules:

1. The value of state can only be modified in the mutation function

The mutation function is specially Method used to process state data, which is the core part of Vuex. When we modify the value of state in the application, we should modify it through mutation instead of modifying it directly.

Sample code:

// mutation函数用来修改state中的count值
const mutations = {
  addCount(state, num) {
    state.count += num;
  }
}

// 调用方法，修改state中的count值
this.$store.commit('addCount', 5);

2. The mutation function must be executed synchronously

The mutation function must be a synchronous function, that is, it cannot contain asynchronous operations (such as setTimeout). This is because Vuex needs to ensure that multiple mutation functions are executed sequentially in the order of registration, which is required by Vuex's responsive mechanism. If the mutation function is asynchronous, this order cannot be guaranteed, and the state cannot be updated correctly.

Sample code:

// mutation函数
const mutations = {
  // 增加count值
  addCount(state, num) {
    setTimeout(() => {
      state.count += num; // 错误代码：包含异步操作
    }, 1000);
  }
}

// 调用方法
this.$store.commit('addCount', 5);

If such an error occurs, we can use the action function to submit the mutation from an asynchronous operation. Sample code:

// mutation函数
const mutations = {
  // 增加count值
  addCount(state, num) {
    state.count += num;
  }
}

// action函数，提交mutation
const actions = {
  asyncAddCount(context, num) {
    setTimeout(() => {
      context.commit('addCount', num); // 提交mutation
    }, 1000);
  }
}

// 调用方法，通过action间接调用mutation
this.$store.dispatch('asyncAddCount', 5);

In this way, you can ensure that the mutation function is still executed synchronously.

Summary

When using vuex in a Vue application, "Error: [vuex] do not mutate vuex store state outside mutation handlers." appears. This error message means that we modify it directly in the application. The vuex state is modified without using the mutation function, which violates the rules of Vuex.

In order to avoid this error, we need to pay attention to the following two points when writing code:

1. The value of state can only be modified in the mutation function
2. Must be executed synchronously mutation function

If you still need to use asynchronous operations, you can use the action function to submit mutations from asynchronous operations. By following these rules, you can avoid this mistake and successfully use Vuex for state management.

The above is the detailed content of How to solve the problem 'Error: [vuex] do not mutate vuex store state outside mutation handlers.' when using vuex in a Vue application?. For more information, please follow other related articles on the PHP Chinese website!