[Vuejs]-Vue2 observable mapGetters updated issue

by

0👍

here is a typical store getter:

const state = {
  obj: {count:1}
}
const getters = {
  obj: (state) => {
    return state.obj
  }
}

if you call a store by either mapGetters or directly through $store.state.obj, you are getting the object itself passed. The object javascritp provides is not immutable, and the nature of objects in js is such that if you make a change to the object when it’s passed to a component, it will update in the store too.

There are two ways you can prevent objects not updating through the passed getter.

  1. do not make changes to it EVER, just reference or copy values as needed when changes are needed.
  2. return a copy of the object in the getter

I’ve personally only used approach 1, but if you need to return a copy for changing (2), you can use any one of these to create a copy

using ES6 spread operator (not a deep copy)

  objCopy: (state) => {
    return {...state.obj};
  }

also a good option for ES6 (not a deep copy):

  objCopy: (state) => {
    return Object.assign({}, state.obj});
  }

or the ES5 way, which creates a deep copy (so the children, grandchildren, etc don’t succumb to same issue)

  objCopy: (state) => {
    return JSON.parse(JSON.stringify(state.obj));
  }

Leave a comment