한 항목에 일부 변경 사항이 있을 때 vuex 어레이의 상태를 업데이트하는 중

한 항목에 일부 변경 사항이 있을 때 vuex 어레이의 상태를 업데이트하는 중

내 vuex 상점에 cases라는 배열이 있어.

어레이의 기존 항목 내에서 몇 개의 필드를 업데이트할 때 어레이를 새 컨텐츠로 업데이트하려고 함.

내 돌연변이에 이런 짓을 할 수 있을 줄 알았는데 효과가 없어 실수를 해버렸어.typeError: undefined is not an object (evaluating 'state.objects.find')—

EDIT_CASE (state, payload) {
    const item = state.objects.find(item => item.id === payload.recordId);
Object.assign(item, payload.case_status);

내 배열은 다음과 같다.

[
    {
        "case_name": "Laptop not working",
        "case_status": "live",
        "case_summary": "This is some summary content",
        "createdBy": "zippy",
        "createdDate": "2018-06-21T15:20:22.932Z",
        "id": "-LFXvk9yY5c-O8yIdf8k"
    },
    {
        "case_name": "Something else",
        "case_status": "live",
        "case_summary": "This is some summary content",
        "createdBy": "zippy",
        "createdDate": "2018-06-21T15:20:22.932Z",
        "id": "-STVvk9yY5c-O3yiTy8k"
    }
]

내가 읽은 바로는 Vue가 어레이 내의 변화를 관찰하지 않기 때문에 완전히 잘못된 방법으로 어레이 항목을 제거한 다음 다시 추가해야 하는 것 같다고 생각한다.

기본적으로 리스트가 있고, 내 백엔드를 변경하고, 이제 그 리스트에 사례 상태를 업데이트하여 내가 변경한 내용이 반영되었으면 하는데, 누구라도 도와줄 수 있을까?

어레이 요소 참조가 아닌 개체 속성을 변경하려고 하기 때문에 예제에 어레이 문제가 없다.문제는 에 있다.Object.assign(item, payload.case_status);- 단순한 필드가 아닌 객체를 제공해야 함. (또한 어레이가 호출한 것을cases그러나 예는 있다.objects, 이 또한 문제일 수 있다.);

따라서 이 방법이 효과가 있을 것이다.

EDIT_CASE (state, payload) {
    const item = state.objects.find(item => item.id === payload.recordId);
    Object.assign(item, payload);
}

오류:

정의되지 않은 것은 대상이 아니다.

내 생각에, 그것은 관련이 있다.Object.assign아마 정의되지 않은 분야로 넘어가기 때문이다.

추신. 어레이 문제가 언제 나타나고 모든 것이 정상 작동하는지 이해하는 데 도움이 되는 작은 예가 있다.코드 설명 참조 :)

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Play around in JSFiddle" },
      { text: "Build something awesome" }
    ]
  },
  methods: {
    // work because object property is reactive
  	changeItemProperty() {
    	this.todos[3].text = "changedItemProperty";
    },
    // same reason, properties are reactive
    changeItemWithAssign() {
    	Object.assign(this.todos[3], { text: "changedItemWithAssign" });
    },
    // does not work, can not track changes in array
    // also this will break all attempts to change TEXT property in UI
    // because property becomes not reactive after this due to new object
    // try to changeItemProperty or  changeItemWithAssign - does not work!
    // changeItem2 will fix it :)
    changeItem() {
    	this.todos[3] = { text: "changedItem" }
    },
    // works
    changeItem2() {
    	Vue.set(this.todos, 3, { text: "changedItem2" });
    }	
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div v-for="todo in todos" :key="todo.text">
     {{todo.text}}
  </div>
  <button @click="changeItemProperty">changeItemProperty(works)</button>
  <button @click="changeItemWithAssign">changeItemWithAssign(works)</button>
  <button @click="changeItem">changeItem(does not work!)</button>
  <button @click="changeItem2">changeItem2(works)</button>
</div>

JavaScript(Vue에 한정되지 않음)에서 인덱스별로 어레이 항목의 값 설정을 직접 감지할 수 없음arr[3] = 'stop';또한 새 키를 추가하거나 개체에서 기존 키를 삭제하는 것도 감지할 수 없다.스토어의 초기 상태를 정의해야 한다(예:

const store = new Vuex.Store({
  state: {
    objects: []
  },
  mutations: {
    EDIT_CASE (state, payload) {
      const index = state.objects.findIndex(item => item.id === payload.id);
      if (index !== -1) state.objects.splice(index, 1, payload);
    }
  }
})

어레이 업데이트 필요

const store = new Vuex.Store({
  state: {
    objects: [
      {id: 1, someProps: 'blablabla'},
      {id: 2, someProps: 'ololololo'}
   ]
  },
  mutations: {
    EDIT_CASE (state, data) {
      const index = state.objects.findIndex(item => item.id === data.id);
      state.objects[index].someProps = data.newPropsValue;

      //this is for vue reaction
      state.objects.push('dog-nail');
      state.objects.splice(-1,1);
  }
})

당신은 Vue를 사용할 수 있다.새로운 물체를 반응하게 만들 작정이다.

  const store = new Vuex.Store({
  state: {
    objects: []
  },
  mutations: {
    EDIT_CASE (state, payload) {
      const index = state.objects.findIndex(item => item.id === payload.id);
      if (index !== -1) {
        Vue.set(state.objects, index, payload);
      }
    }
  }
});

나는 그런 문제가 있었고 아래와 같이 해결했다: // 구성 요소에서.

 computed: {

     data: {
         get() {
             this.$store.commit('updateData', this.$store.state.data)
             return this.$store.state.data;
         },
     }
 }

// 매장 내

 mutations: {
      updateData(state,item){
          store.state.data = item;
      }
  }

그래, 정말 놀라워.

참조URL: https://stackoverflow.com/questions/51149729/updating-state-of-vuex-array-when-one-item-has-some-changes