Vue3+Vuex4场景下从store获取数组应使用reactive还是computed？

API 探路者

2026-10-2

实现正确性判断与方案建议

1. 现有reactive写法的问题

你目前用reactive(store.getters.getList)的写法虽然暂时能运行，但存在隐性风险，不推荐：

Vuex的state和对应的getter本身已经是响应式的，额外用reactive包裹属于冗余操作
如果你在mutation中修改list时是替换数组引用（比如排序后返回新数组赋值给state.list），reactive包裹的变量不会自动同步最新的引用，会出现数据不更新的bug，你现在能正常运行大概率是因为你当前的mutation都是原地修改数组，不符合Vuex单向数据流的最佳实践。

2. 只读computed的写法是正确的

你补充的只读computed写法是该场景下的最佳实践：

let list = computed({
    get: () => {
        return store.getters.getList;
    }
});

computed会自动跟踪store.getters.getList的依赖，只要state中的list发生变化，组件内的list就会自动更新，不存在引用同步问题
遵循了单向数据流的规范，组件侧只读取数据，修改全走Vuex的action/mutation，逻辑更易维护。

3. 之前带get/set的computed报错的原因

你之前写带set的computed删除元素出问题，大概率是set的逻辑没有走Vuex的修改流程：

你不能在set中直接修改list数组本身，Vuex不允许组件侧直接修改state的值
正确的可写computed写法应该是在set中调用对应的action，示例如下：

let list = computed({
  get: () => store.getters.getList,
  set: (newList) => {
    // 不要直接改state，而是调用action把新值传过去修改
    store.dispatch('updateList', newList)
  }
})

如果只是需要增删元素，直接在组件里调用对应的store.dispatch即可，没必要做可写的computed。