Below is a standard example of a store getter:
const state = {
obj: {count:1}
}
const getters = {
obj: (state) => {
return state.obj
}
}
When you access a store using either mapGetters or directly through $store.state.obj, you receive the object itself. The object in JavaScript is not immutable, meaning any changes made to it will reflect in the original store as well.
To prevent unintentional updates to objects retrieved from getters, there are two strategies:
- Avoid making direct modifications and only refer to or copy values when necessary for changes.
- Return a clone of the object in the getter function.
I personally prefer the first approach, but if you require a copy for modification (second approach), you can use the following methods to create a copy:
Using ES6 spread operator (shallow copy):
objCopy: (state) => {
return {...state.obj};
}
Another option in ES6 for shallow copying:
objCopy: (state) => {
return Object.assign({}, state.obj});
}
Or the ES5 method, which produces a deep copy (ensuring nested objects remain unaffected)
objCopy: (state) => {
return JSON.parse(JSON.stringify(state.obj));
}