Vuex中数组中对象的反应式设置器的最佳实践是什么？答案

【问题标题】：What is the best practice for reactive setter for an object in array in Vuex?Vuex中数组中对象的反应式设置器的最佳实践是什么？
【发布时间】：2019-10-07 15:16:59
【问题描述】：

我有一个包含多种语言的 vuex 对象，其中包含带有 guid、名称和级别的对象。

我如何编写方法以使其具有反应性。我已经到了我有 value="language.name" 的输入字段和 我想为 @input 编写方法但我不知道它的最佳做法是什么。

我有 Vuex 商店：

const state = () => ({
  ...
  obj: {
    skills: [],
    languages: []
  },
  ...
})

v-for="(language, index) in obj.languages"中模板的使用示例：

v-text-field(
  :value="language.name"
  @input="setLanguage"
)

在深入阅读有关 Vue 的 getters、setters、modern Javascript limitations 之后的代码，因此它无法跟踪状态中数组的变化，因此需要使用 Vue.set() 内置的解决方法-在我想出的vuex github上TodoMVC example的方法和使用中：

setLanguage: (e) => {
  function f({language, guid = language.guid, name = language.name, level = language.level}){
    Vue.set(this.$store.state.obj.languages, this.$store.state.obj.languages.findIndex((it) => it.guid === guid), {guid, name, level})
  }
  const name = e.target.value.trim()
  const language = this
  f({language, name})
}

好像不太对。而且我觉得我不明白这个概念。

您能否展示使数组的反应性对象处于 vuex 状态的最佳实践是什么？

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

使用 vuex，您希望使用动作和突变。

setLanguage: (e, index) => {
  let name = e.target.value.trim()
  this.$store.dispatch('setLanguage', {name, index}) //dispatches a vuex action
}

然后定义一个动作：

setLanguage({ commit }, payload) {
  commit('setLanguage', payload) //commits a vuex mutation
}

最后是一个突变：

setLanguage(state, payload) {
  state.languages[payload.index].name = payload.name
}

请参阅 vuex 文档：https://vuex.vuejs.org/guide/actions.html

【讨论】：