奔溃的一天，满屏的报错[vuex] do not mutate vuex store state outside mutation handlers.

Question

奔溃的一天，满屏的报错[vuex] do not mutate vuex store state outside mutation handlers.
​​

上个礼拜还不会报错，不知道在改错那个地方，连同其他原本写完的功能一起报错了

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

问题分析

从你提供的截图和描述来看，你遇到的错误是典型的Vuex状态管理错误。错误信息“[vuex] do not mutate vuex store state outside mutation handlers.”明确指出了问题所在：你试图在mutation处理函数之外直接修改Vuex的状态。

错误原因

1. 直接赋值：在Vue组件中直接对Vuex状态进行赋值操作，而不是通过提交mutation。
2. 错误使用：可能在某些地方错误地使用了Vuex状态，比如在计算属性或方法中直接修改。

解决步骤

1. 审查代码：检查所有涉及Vuex状态的代码，特别是那些可能直接赋值的地方。
2. 使用mutation：确保所有状态的修改都是通过提交mutation来完成的。
3. 避免直接赋值：不要在组件的方法或者生命周期钩子中直接对Vuex状态进行赋值操作。

示例代码

假设你有一个Vuex store，其中包含一个schoolId状态，你需要在某个组件中修改这个状态。以下是如何正确地使用Vuex进行状态管理的示例：

Vuex Store

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    schoolId: null
  },
  mutations: {
    setSchoolId(state, id) {
      state.schoolId = id;
    }
  },
  actions: {
    updateSchoolId({ commit }, id) {
      commit('setSchoolId', id);
    }
  }
});

Vue组件

<template>
  <div>
    <button @click="updateSchoolId">更新学校ID</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateSchoolId() {
      // 正确的方式：提交一个mutation
      this.$store.dispatch('updateSchoolId', '123'); // 假设新的学校ID为123
    }
  }
}
</script>

注意事项

• 避免直接赋值：不要在组件的任何地方直接对this.$store.state进行赋值操作。
• 使用actions处理异步操作：如果你需要在异步操作中更新状态，可以使用actions。在actions中，你可以提交mutations来更新状态。
• 检查生命周期钩子：确保在组件的生命周期钩子中没有直接修改Vuex状态。

进一步检查

1. 组件方法：检查所有组件的方法，确保没有直接修改Vuex状态。
2. 计算属性：检查所有计算属性，确保它们没有直接修改Vuex状态。
3. 第三方库：检查是否有第三方库或插件可能影响Vuex状态的管理。

通过上述步骤和示例，你应该能够解决遇到的Vuex状态管理问题。如果问题仍然存在，可能需要更详细的代码审查来定位问题。