Vuex 저장소를 교체하지 않고 Vuex 업데이트

Vuex 저장소를 교체하지 않고 Vuex 업데이트

내 Nuxt store/index.js 파일에 다음 데이터가 있는 경우:

export const state = () => ({
    user: {
        status: 'signedin',
        data: {
            'salutation': 'Mr',
            'firstname': 'Test',
            'lastname': 'Person',
            'emailaddress': 'test@test.com'
        }
    }
});

'데이터' 섹션 내에서 특정 값을 업데이트하고 싶지만 다른 값은 업데이트하지 않음...예: '이름'을 '데이비드'로 변경하고 싶지만 나머지 데이터는 동일하게 유지하고 싶다.누가 나에게 올바른 방향을 가리켜 줄 수 있겠니?

돌연변이로 이 일을 할 수 있어야지CodePen은 하위 속성을 업데이트하는 예를 참조하십시오.

당신의 경우, 당신의 돌연변이는 다음과 같이 보일 것이다.

{
...
  mutations: {
    UPDATE_FIRST_NAME(state, value) {
      state.user.data.firstname = value;
    }
  }
...
}
// Call the mutation
this.$store.commit('UPDATE_FIRST_NAME', 'David')

난 내가 이 일을 해결했다고 믿는다.내 돌연변이는 이렇게 생겼어

{
...
  mutations: {
    UPDATE_USER_DATA(state, value)
    {
        for(const value in values)
        {
            state.user.data[value] = values[value];
        }
    }
  }
...
}

그런 다음 다음을 사용하여 특정 데이터를 업데이트할 수 있다.

this.$store.commit('UPDATE_USER_DATA', {'firstname': 'New'});

이렇게 하면 '이름'이 '새 이름'으로 업데이트되지만 나머지 데이터는 그대로 유지된다.

나는 또한 소품을 기반으로 내 '데이터' 안에 필드를 설정하기 위해 돌연변이를 사용하는 자식 구성요소가 있는 경우와 같이 데이터를 동적으로 업데이트할 수 있다.예: 내 소품 '필드'가 '퍼스트네임'으로 설정되어 있다면, 나는 다음을 이용하여 그것을 내 돌연변이에 전달할 수 있다.

this.$store.commit('UPDATE_USER_DATA', {this.field: 'New'});

이렇게 하면 '이름'도 '새 이름'으로 업데이트되지만, 나머지 데이터는 그대로 유지된다.

참조URL: https://stackoverflow.com/questions/58822876/update-data-in-vuex-store-rather-than-replace-it