Vuex에서 모듈을 가져오고 재설정하는 방법

Vuex에서 모듈을 가져오고 재설정하는 방법

모듈 2개 #모듈 A가 있습니다.

const state = {
    a: '',
    b: '',
    c: '',
}
const mutations = {
    reset(state) {
    state.a = ''
    state.b = ''
    state.c = ''
  }
}

vuex-map-fields를 사용하여 컴포넌트에서 양방향 바인딩을 사용하도록 설정합니다.a

그 후 모듈 A의 모든 상태를 모듈 B(state.items)로 가져오고 #module B 가져오기 완료 후 RESET합니다.

const state = {
 items: []
},
const mutations = {
    addItem (state) {
        state.items.push(moduleA.state)
    },
}

나는 노력했다.

dispatch('moduleB/addItems')
commit('molduleA/reset')

모듈 데이터 포함A.

const state = {
    a: '1',
    b: '2',
    c: '3',
}

동작하지 않습니다.모듈의 리셋 상태만 저장해 주세요.a

#모듈B의 결과

const state = {
 items: [
    {a:'', b:'', c:''}
 ]
},

디스패치('moduleB/addItems')만 하면 동작합니다.

const state = {
 items: [
    {a:'1', b:'2', c:'3'}
 ]
},

어떻게 하면 좋을까요?잘 부탁드립니다

네, 그래서 이제 당신의 문제를 이해할 수 있을 것 같아요.틀렸으면 정정해 주세요!Module B 함수를 호출하기만 하면 B에는 A.state의 데이터가 정상적으로 격납되어 있습니다.그러나 A.state에서 리셋 함수를 호출하면 둘 다 비어 있습니다.

그 이유는 A.state 객체를 B.state에 추가하는 방법이 원인일 수 있습니다.A.state 객체를 B.state.items 배열에 푸시하면 객체 또는 그 값에 대처할 수 없습니다.메모리에서 개체가 위치한 주소를 전달하기만 하면 됩니다.

따라서 A.state와 B.state.items 배열의 요소는 메모리 내의 동일한 위치를 "보고" 있습니다.A.state를 정지하면 B.state.items 배열 요소도 변경됩니다.

상태 배열의 deepCopy를 사용하여 이 문제를 해결할 수 있습니다.lodash에는 cloneDeep와 같은 기능이 있습니다.하지만 지금 무슨 일이 일어나고 있는지 충분히 이해하기 위해서는 그렇게 어렵지 않기 때문에 여러분 스스로 그 함수를 쓸 수 있습니다.

function deepCopy(obj) {
  const retObj = {}
  Object.keys(obj).forEach(prop => {
    retObj[prop] = obj[prop];
  });

  return retObj
}

이 기능은 사용자의 객체나 사용자의 경우에 사용할 수 있어야 합니다.(객체에 중첩된 속성이 있는 경우 속성에 액세스하는 방법 때문에 작동하지 않습니다.)

제가 놓친 게 없었으면 좋겠고, 어떻게든 당신에게 도움이 됐으면 좋겠어요!

언급URL : https://stackoverflow.com/questions/65772629/how-to-fetch-and-reset-modules-in-vuex