Question

我有一个带有语言数组的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状态下使数组的反应对象成为最佳方法吗？

Answer 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

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

1 个答案: