响应式或计算式阵列

Question

我想知道我是否做对了。使用 Vue3 和 Vuex4.

我的商店里有一个名为 list 的数组，如下所示：

  const store = createStore({
    plugins: [createPersistedState()],
    state() {
      return {
        list: [{
            name:  makeid(7),
            id: makeid(5),
            group: {
                head: false,
                inGroup: 0,
                pos: 0.0
            }
        }]
}

对于 add/remove 元素，我使用突变随后对数组进行排序。在我的组件中，我得到这样的数组：

let list = reactive(store.getters.getList);

动作调用如下：

store.dispatch('pushElement', el)
store.dispatch('removeElement', id)

使用 reactive 时数组按预期更新。但我想知道是否更喜欢对列表使用 computed property 而不是反应式数组？我已经用

试过了

list = computed () => {get()..., set()...}

但是从数组中删除元素时遇到问题。

所以，我是在这里做的吗？

编辑：

正如建议的那样，我现在在只读方面使用计算的属性，例如：

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

Answer 1

处理这个问题的正确方法是使用完全没有 setter 的计算属性。所以数据操作保存在存储中：

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

响应式或计算式阵列

Reactive or Computed for array

vue.js

vuex

vuejs3

vuex4