vue.jsvuexvuejs3vuex4

Reactive or Computed for array


I wonder if I'm doing it correctly. Using Vue3 and Vuex4.

I got an array named list in my store, looking like this:

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

To add/remove elements I use mutations with subsequently sorting the array. In my componment I get the array like this:

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

Actions are called like:

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

The array updates as expected when using reactive. But I wonder if is preferred to use an computed property for the list instead of an reactive array? I already tried it with

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

But had problems removing an element from the array.

So, am I doing it right here?

EDIT:

As suggested I'm using a computed property now for the read-only aspect, like:

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

Solution

  • The correct way to deal with this, was using a computed property without a setter at all. So the data manipulation is kept in the store:

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