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;
}
});
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;
}
});