programing

Vuex Getters는 참조(어레이, 객체 등)를 상태로 반환합니까?

firstcheck 2022. 7. 29. 22:49
반응형

Vuex Getters는 참조(어레이, 객체 등)를 상태로 반환합니까?

환경
Vue 2를 사용하는 Vue CLI가 있습니다.Vuex 및 TypeScript가 설치되어 있습니다.

쟁점.
현재 vuex getter를 통해 일부 vuex 상태 데이터를 가져오고 있습니다.그럼 그걸로 작업하는 거지단, "geten data"를 변환하면 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개는 데이터 변수를 변환하기 때문에 스토어를 변환합니다.그 때문에 주정부 자료에 대한 참조가 전달된 것 같습니다.

이거에 대해 아는 사람?아니면 좋은 방법을 알고 있나요?상점에서 중첩된 데이터만 넘겨주는 것에 대한 아이디어가 있어요.stackoverflow 답변은 제가 찾은 최고의 통찰력 중 하나입니다.

이 경우 다차원 배열을 복제해야 합니다.어레이 클로닝에는 얕은 타입과 깊은 타입의 2종류가 있습니다.얕은 복사본은 어레이의 첫 번째 레벨에만 적용되며 나머지는 참조됩니다.네스트된 어레이의 실제 복사본을 원하는 경우 딥 클론이 필요합니다.딥 클론의 경우 JSON 방식으로 진행하거나 Lodash를 사용하는 것이 좋습니다.

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

아니면

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

Lodash 클론 및 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 {
 .........

언급URL : https://stackoverflow.com/questions/65944942/do-vuex-getters-return-a-reference-array-object-whatever-to-the-state

반응형