无法通过mutation修改Vuex状态：TypeError: 0 is read-only报错求助

我之前踩过这个坑！这个错误的核心原因是Apollo Client返回的数组是被冻结（Object.freeze）的，它不允许直接修改原数组的元素或结构，而你用splice直接操作state里的Posts数组，就触发了只读限制。

下面给你几个可行的解决办法：

1. 先把Apollo返回的数组转成可修改的普通数组 #

在把Apollo查询到的帖子数据存入Vuex state之前，先通过扩展运算符或者Array.from把它转成一个新的、可修改的数组：

// 比如在获取Apollo数据的action里处理
async fetchPosts({ commit }) {
  const { data } = await this.$apollo.query({ query: POSTS_QUERY });
  // 转成新数组再存入state
  commit('SET_POSTS', [...data.posts]);
}

这样state里的Posts就不再是Apollo返回的冻结数组，后续用splice修改就不会报错了。

2. 改用Immutable的方式更新Vuex state（推荐） #

其实Vuex官方更推荐用Immutable的方式更新state，也就是不直接修改原数组，而是生成新数组替换原数组。这样不仅能避开只读问题，还符合Vuex的状态管理最佳实践：

// 修改你的DELETE_POST mutation
DELETE_POST: (state, index) => {
  // 用filter过滤掉要删除的元素，生成新数组
  state.Posts = state.Posts.filter((_, idx) => idx !== index);
  // 或者用slice拼接的方式：
  // state.Posts = [...state.Posts.slice(0, index), ...state.Posts.slice(index + 1)];
}

这种方式不管原数组是不是冻结的，都不会直接修改它，完全规避了只读限制，同时Vue也能正常检测到state的变化并更新视图。

3. 额外检查：确认传递的index是正确的 #

虽然这个报错主要是只读问题，但也可以顺便确认一下组件里传递的index是不是正确的数组索引——有时候可能误传了帖子ID或者其他值，导致操作了不存在的位置，但这不是当前报错的直接原因。

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