Vue + vuex 개체 돌연변이

Vue + vuex 개체 돌연변이

다음과 같은 상태가 있습니다.

state: {
  objects: [ 
    { 
      id: 10,
      key2: 'smth',
      key3: 'smth'
      //etc...
    },
    { 
      id: 12',
      key2: 'smth',
      key3: 'smth'
      //etc...
    }
  ]
}

ID로 하나를 선택한 다음 v-model을 통해 키를 변경합니다.

취득하다

  activeObject: state => {
    return state.objects.find((obj) => obj.id === state.objId)
  }

vue 템플릿 내

  computed: {
    obj() {
      return this.$store.getters.activeObject
    }
  },

html로

<input v-model="obj.key2"></input>

문제는 vuex가 돌연변이만 바꾸면 된다고 하더라고요computed: get() set() 또는 _.deepClone과 같은 많은 솔루션을 보았습니다만, id 변환으로 오브젝트 전체를 다시 쓰려면 어떻게 해야 합니까?어레이 내의 오브젝트에는 여러 키가 포함되어 있을 수 있기 때문에 모든 키에 업데이트 커밋 펑크를 쓰는 것은 매우 귀찮습니다.

1개의 커밋으로 여러 키를 가진 오브젝트를 다시 쓰는 솔루션이 있습니까?

그리고 Lodash나 다른 lbis는 사용하지 말고 플레인 vue/js만 사용하세요.

1개의 커밋으로 여러 키를 가진 오브젝트를 다시 쓰는 솔루션이 있습니까?

물론 다음과 같은 것이 있습니다.

myMutation(state, { id, newItem }) {
    const item = state.objects.find(item => item.id === id);
    Object.assign(item, newItem);
}

//...
const params = { id: 23, newItem: myNewItem };
store.commit('myMutation', params);

Vue는 어레이 내부의 변경을 감시하지 않습니다.그것은 그들에게 반응하지 않을 것이다.

---

OP가 소스 코드 샘플을 추가한 후 편집

이는 Vuex의 "일방향 데이터 흐름" 개념에 반하는 것입니다.사용 사례를 처리하는 방법은 Vuex 문서에 자세히 설명되어 있습니다.

obj가 저장소에서 개체를 반환하는 계산된 속성이라고 가정하면 v-model은 사용자가 입력을 입력할 때 obj.message를 직접 변환하려고 시도합니다.strict 모드에서는 변환이 명시적인 Vuex 변환 핸들러 내에서 실행되지 않기 때문에 오류가 발생합니다.이 문제에 대처하기 위한 "Vuex 방법"은 의 값을 바인딩하고 입력 또는 변경 이벤트에 대한 액션을 호출하는 것입니다.

따라서 다음과 같은 이벤트 핸들러를 사용합니다.

updateObj (e) { this.$store.commit('updateObj', e.target.value); }

그것은 당신의 HTML 코드에서 호출됩니다.

<input :value="message" @input="updateObj">

이미 언급한 바와 같이 Vue가 저장된 변경 내용을 볼 수 있는지 여부입니다.Objects/Arrays는 Vuex 돌연변이를 참조하는 방법 및 액세스 방법 및 정의에 따라 달라집니다.

언급URL : https://stackoverflow.com/questions/45901200/vue-vuex-object-mutations