web-dev-qa-db-ja.com

1つのアイテムに変更があった場合の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は配列内の変化を観察しないので、これで完全に間違った方法で行っている可能性があり、配列を削除してから再度追加する必要があると思います項目？

基本的にリストがあります。バックエンドに変更を加えます。今度はそのリストに、ケースの状態を更新することで加えた変更を反映させたいのですが、だれでも手助けできますか？

vue.jsvuejs2vuex
11
Paul

配列要素referenceではなくオブジェクトプロパティを変更しようとするため、この例では配列の問題はありません。問題は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);
}

エラー：

undefinedはオブジェクトではありません

私はそれがObject.assignに関連していると思いますndefinedであるフィールドをそれに渡すからです。

追伸アレイの問題がいつ表示され、すべてが正常に機能するタイミングを理解するのに役立つ小さな例があります。コードのコメントを参照してください:)

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>
19
Max Sinev

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);
    }
  }
})
6
IVO GELOV

アレイを更新する必要があります

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);
  }
})
1
Paul