Vuex Getters 是否返回对状态的引用（数组、对象等）？

Question

环境
我们有一个使用 Vue 2 的 Vue Cli。已安装 Vuex 和 TypeScript

问题
目前我们正在获取一些 vuex 状态数据（通过 vuex getter）。然后使用它。但是，如果我们改变“获取的数据”，它会影响 vuex 状态。看起来很疯狂！这是一个非常愚蠢的服务模块精简版：

// 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
  }
}

非常精简的吸气剂看起来像这样：

getTestStoreData(state) { return state.data }

所以上面 3 个中的 2 个会改变 store，因为它们会改变 data 变量......这让我相信 getter 传递了状态数据的引用。

有人对此有所了解吗？或者知道处理它的好方法吗？ 我有一些关于仅从商店传递嵌套数据的想法。 stackoverflow answer 是我发现的一些最佳见解。

Answer 1

在您的情况下，您需要克隆多维数组。 数组克隆有 2 种类型：浅层和深层。浅拷贝仅覆盖数组的第一级，其余的被引用。如果您想要嵌套数组的真实副本，则需要深度克隆。对于深度克隆，使用 JSON 方式或者更好的是使用 Lodash

// Using JavaScript
let data = JSON.parse(JSON.stringify(store.getters['getTestStoreData']));

或者

// Using Lodash
let data = _.cloneDeep(store.getters['getTestStoreData']);

要测试 Lodash 的 clone 和 clonedeep 功能，您需要先安装 Lodash：

npm install --save lodash

或者

yarn add lodash

现在安装了 lodash，使用 require() 函数现在可以访问 Lodash 也提供的所有功能：

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

const _ = require('lodash'); // Line to be included

export default class TestService implements ServiceType {
 .........