반응성으로 인한 동작 내 Vuex 데이터 변환 문제

반응성으로 인한 동작 내 Vuex 데이터 변환 문제

Vuex 스토어에 새로운 데이터를 업데이트하여 API를 호출해야 하는 액션이 있습니다.

내 스토어에 있는 기존 값의 복사본인 개체를 생성하여 반응성의 영향을 받지 않고 자유롭게 변환하고 싶습니다.

지금 당장, 제가 이 노래를 할 때Array.push()콜, 이 에러가 발생했습니다.

변환 핸들러 외부의 vuex 저장소 상태 변환 안 함

내가 어떻게 다르게 할 수 있을까?

(게터가 있습니다)rootState.phone.policy.currentPolicy.attributes.insured.phones이 에러가 설명되고 있습니다).

  async [PolicyActionTypes.UPDATE_POLICY](
    { rootState },
    payload: UpdatePolicyPayload
  ) {
    const newPolicy: Policy = {
      ...rootState.phone.policy.currentPolicy,
    };

    const newPhone: Phone = {
      imei: '123',
      brand: 'Samsung',
    };

    newPolicy.attributes.insured.phones.push(newPhone);

    // Fake async API call
    api.updatePolicy(newPolicy)
  },

퍼트릴 때는 얕은 복사를 하고 있기 때문에 오래된 오브젝트를 참조할 수 있습니다.
오브젝트를 변이시키면 오래된 복사본인 반면 깊은 복사본이라고 생각하게 됩니다.

답변에 대한 자세한 내용은 여기를 참조하십시오.

TLDR:cloneDeep여기 가는 길이에요.

언급URL : https://stackoverflow.com/questions/70392679/problem-with-vuex-data-mutation-inside-action-due-to-reactivity