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
'programing' 카테고리의 다른 글
vuex에서 중첩된/복잡한 개체 처리 (0) | 2022.07.29 |
---|---|
리스트에서 요소의 발생 횟수를 카운트하는 방법 (0) | 2022.07.29 |
Java에서 정수로 이중 캐스트 (0) | 2022.07.29 |
Viewify 메인 드로어/내비게이션에서 하위 메뉴를 만드는 방법 (0) | 2022.07.29 |
헤더 파일의 변수 선언 - 정적입니까? (0) | 2022.07.29 |