web-dev-qa-db-ja.com

Vuexを使用して配列内のオブジェクトを更新する

Vuexで配列内のオブジェクトを更新するにはどうすればよいですか？私はこれを試しましたが、うまくいきませんでした：

const state = {
  categories: []
};

// mutations:
[mutationType.UPDATE_CATEGORY] (state, id, category) {
  const record = state.categories.find(element => element.id === id);
  state.categories[record] = category;
}

// actions:
updateCategory({commit}, id, category) {
  categoriesApi.updateCategory(id, category).then((response) => {
    commit(mutationType.UPDATE_CATEGORY, id, response);
    router.Push({name: 'categories'});
  })
}
javascriptvue.jsvuejs2vuex
6
Phuong Thuan
[mutationType.UPDATE_CATEGORY] (state, id, category) {
  state.categories = [
     ...state.categories.filter(element => element.id !== id),
     category
  ]
}

これは、「categories」配列を、一致する要素のない元の配列に置き換え、更新された要素を配列の最後に連結することにより機能します。

このメソッドの1つの注意点は、配列の順序が破壊されることです。ただし、多くの場合、問題にはなりません。心に留めておいてください。

18
ArtemSky