Vuex mutation内修改store state仍报不可在mutation外修改状态错误

问题原因 #

这个报错是Vuex严格模式下的状态变更校验抛出的，虽然你的赋值代码写在mutation定义内部，但本质还是触发了「state在mutation外被修改」的校验规则。你注释掉赋值代码后报错消失，也验证了大概率是payload引用关联的问题，常见触发场景如下：

• 传入的payload是外部响应式对象的直接引用：如果你把组件的响应式data/prop、或者其他响应式变量直接作为payload传入，赋值给state后，state和外部变量会指向同一个内存地址。后续只要在外部修改这个响应式对象的属性，就会同步修改state的值，这个修改动作发生在mutation外，就会触发报错。
• 调用mutation的方式错误：没有通过commit('SET_FILTERS_CATEGORIES', payload)的标准方式触发mutation，而是直接获取mutation函数手动调用，此时Vuex的状态变更校验逻辑不会识别到当前是在mutation内部执行修改，也会抛出错误。
• 存在其他直接修改state的逻辑：代码中存在其他位置直接修改state.filters.categories及其子属性的操作，和当前mutation无关，只是刚好触发时机和mutation执行重合，导致你误以为是mutation内部的赋值导致的报错。

解决方法 #

• 赋值时切断引用关系：给state赋值时对payload做浅拷贝/深拷贝，避免state直接引用外部对象：

  // 单层数组浅拷贝
  state.filters.categories = [...payload]
  // 单层对象浅拷贝
  state.filters.categories = {...payload}
  // 复杂嵌套结构深拷贝
  state.filters.categories = structuredClone(payload)
  // 也可以用JSON序列化、lodash cloneDeep等其他深拷贝方案
  

• 校验mutation调用方式：所有mutation必须通过store.commit方法触发，禁止直接调用mutation函数。
• 全局排查state修改逻辑：搜索代码中所有直接访问state.filters.categories的位置，确认没有直接赋值修改属性的操作。

内容的提问来源于stack exchange，提问作者Čamo