In my Vuex store, I have two states:
- notes (synced notes with the server/DB)
- localNotes (unsynced notes that will move to 'notes' state upon syncing)
To display the notes in a list, I use a getter that merges the two objects and returns the merged result.
The issue I am facing is that when I add a new note to one of the states, it doesn't show up in the list because the getter doesn't detect the change. I believe this is due to returning a variable instead of a function.
Here is the code for my getter:
const getters = {
notesObject: (state, getters, rootState, rootGetters) => {
let result = {};
let mergedObject = {...state.notes, ...state.localNotes};
Object.keys(mergedObject).forEach(key => {
const item = mergedObject[key];
if (rootGetters['tags/activeKey'] === null) {
result[key] = item
} else if (item.tag_id === rootGetters['tags/activeKey']) {
result[key] = item
}
});
return result;
},
};
Example object structure:
example: {
5: {
title: 'Testing title',
text: 'text'
},
6: {
title: 'Testing title',
text: 'text'
}
}
I need help finding the best solution for this issue. One idea was to use a watcher, but I know it's best to avoid them.
One possible solution is to have the watcher merge the two states into a new state so that the getter no longer needs to perform the merge operation.