在Vue應用中使用vuex時出現「Error: [vuex] do not mutate vuex store state outside mutation handlers.」怎麼解決？-Vue.js-PHP中文網

在Vue應用中使用vuex時出現「Error: [vuex] do not mutate vuex store state outside mutation handlers.」怎麼解決？

PHPz

發布： 2023-06-24 19:04:29

原創

3552 人瀏覽過

在Vue應用程式中，使用vuex是常見的狀態管理方式。然而，在使用vuex時，我們有時可能會遇到這樣的錯誤提示：「Error: [vuex] do not mutate vuex store state outside mutation handlers.」這個錯誤提示是什麼意思呢？為什麼會出現這個錯誤提示？如何解決這個錯誤？本文將詳細介紹這個問題。

錯誤提示的意思

「Error: [vuex] do not mutate vuex store state outside mutation handlers」的意思是，在vuex中，不能在突變函數外部直接修改vuex狀態。也就是說，當我們在應用程式中修改vuex狀態（即state）的值時，不要直接修改state的值，而是要透過mutation函數來修改。

這是因為，在Vuex中，state是唯一的資料來源，也是回應式對象，當state的值改變時，會自動刷新關聯的元件，從而實現資料的即時變更。如果我們直接修改state的值，那麼這個響應式機制將會失效，介面也無法更新。

所以，如果出現這個錯誤提示，就表示我們在程式碼中直接修改了state的值，而沒有透過mutation函數來修改。那麼，該如何避免這個錯誤呢？這需要我們在編寫程式碼時注意一些規則。

如何避免這個錯誤？

要避免這個錯誤，需要遵循以下兩個規則：

只能在mutation函數中修改state的值

mutation函數是專門用來處理state資料的方法，它是Vuex的核心部分。我們在應用程式中修改state的值時，應該透過mutation來修改，而不是直接修改。

範例程式碼：

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

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

登入後複製

必須同步執行mutation函數

mutation函數必須是同步函數，也就是不能包含非同步運算（例如setTimeout）。這是因為，Vuex需要確保多個突變函數依照註冊的順序依序執行，這是Vuex的響應式機制所必須的。如果mutation函數是非同步的，就無法保證這個順序，那麼狀態就無法得到正確的更新。

範例程式碼：

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

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

登入後複製

如果出現這樣的錯誤，我們可以使用action函數來從非同步操作中提交mutation。範例程式碼：

// 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);

登入後複製

這樣，就可以保證mutation函數仍然是同步執行的。