Do Vuex Getters return a reference (array, object, whatever) to the state?

by

Environment
We have a Vue Cli using Vue 2. Vuex and TypeScript are installed

Issue
Currently we’re getting some vuex state data (via a vuex getter). Then working with it. However, if we mutate the "gotten data" it affects the vuex state. It seems crazy! Here’s a very silly stripped down version of a services module:

// vuex
import { mapState } from 'vuex'
// store
import store from './../store';
// types
import { ServiceType } from './../types/services'

export default class TestService implements ServiceType {

  serviceFunction(someArray: Array<number>) {

    // this will return some nested/multidimensional data:
    // [
    //   { prop: [[1, 2, 3, 4]] }
    // ]
    let data = store.getters['getTestStoreData'] 
      
      data[0].prop[0] = someArray          // doesn't mutate the state 
      data[0].prop = [someArray]           // mutates the state
      data[0].prop.splice(0, 1, someArray) // mutates the state
  }
}

The very very stripped down getter looks something like this:

getTestStoreData(state) { return state.data }

So 2 of the 3 above will mutate the store, since they mutate the data variable… Which leads me to believe the getter passes a reference of the state data.

Anyone have insight into this? Or know a good way to handle it?
I’ve got some ideas about passing just the nested data from the store. This stackoverflow answer is some of the best insight I’ve found.

42 thoughts on “Do Vuex Getters return a reference (array, object, whatever) to the state?”

Leave a Comment