Vuex: 복잡한 객체 및 상태 변경 기능 사용

Vuex: 복잡한 객체 및 상태 변경 기능 사용

외부 API를 사용하고 있다고 가정합니다.Machine물건들.작성할 수 있습니다.Machine와 함께createMachine여러 중첩된 속성을 가진 복잡한 개체와 해당 개체의 상태를 변경하기 위한 함수 집합을 제공합니다.API는 예를 들어 다음과 같습니다.loadMemory,sleep,connectDevice(유사한 것을 상상해 보십시오.이것은 예에 지나지 않습니다).

글로벌 Vuex를 사용하고 싶다Machineobject를 사용하여 다음과 같이 초기 생성을 디스패치하고 반환된 객체를 저장합니다.

actions: {
createChannel({ commit, state }, params) {
      m.createMachine(params).then(
        function (newMachine) {
          commit('setMachine', newMachine);
        }
      ).catch(err => { console.error("Error"); } )
    }
}

이 경우 돌연변이는 매우 간단합니다.

  setMachine(state, machine) {
      state.machine = machine;
    }

"Machine" 객체에 대해 설정된 API에는 상태를 수정하는 호출이 많이 있습니다. 어떤 필드가 변경되는지 알 수 없습니다.상태가 변경되기 때문에, 그것들을 사용해 글로벌하게 영향을 주고 싶다.MachineVuex 스토어의 오브젝트를 액션으로 감싸고 싶습니다.

액션이 호출할 수 있습니다.

this.state.machine.loadMemory(mem.addr)

그러나 이 콜이 그 자체를 변경했다면machine오브젝트, 새로운 상태를 커밋하려면 어떻게 해야 합니까?이전 개체를 복제하고 상태 변경 메서드를 적용하고 개체를 교체해야 합니까?

복제는 쉬운 일이 아니라는 것을 알고 있습니다.

고마워요.

복잡한 개체를 다시 마운트할 수 있습니다.이 예에 따르면 다음과 같은 돌연변이가 발생할 수 있습니다.

loadMemory(state, newAddr) {
  const { machine } = state;

  state.machine = {
    ...machine, // set all machine's properties
    addr: newAddr,
  };
}

원하는 중첩된 개체 수준에서 작동합니다.또 다른 예는 다음과 같습니다.

loadMemory(state, newValue) {
  const { machine } = state;
  const { machineObjProp } = machine; 

  state.machine = {
    ...machine, // set all machine's properties
    machineObjProp: {
       ...machineObjProp, // set all machineObjProp's properties
       value: newValue,
    },
  };
}

lodash clone Deep을 사용하는 방법 중 하나는 앱 속성 및 객체의 메서드를 복사하는 것입니다.

import _ from lodash

this.state.machine.loadMemory(mem.addr)
const copyMachine = _.cloneDeep(this.state.machine)
this.$store.commit('setMachine', copyMachine)

언급URL : https://stackoverflow.com/questions/57225016/vuex-working-with-complex-objects-and-state-changing-functions