vue.js - 在 v-for 的情况下如何从 v-model 输入更新 Vuex 存储

Question

我说的是数组中的 10 个对象 策略 = [{name:'a',text:''},{name:'b',text:''},....]

它们使用 v-for 进行迭代以显示标签 A:文本属性绑定(bind)为 v-model 的输入框。我想在 v-model 中的策略文本发生变化时触发突变。

这是它的 fiddle 链接。 https://jsfiddle.net/dmf2crzL/41/

Answer 1

我们假设您希望将 v-model 与 Vuex 存储一起用于 2-way 绑定(bind)。

你的问题是你想要 Vuex 存储在严格模式下。

const store = new Vuex.Store({
  // ...
  strict: true
})

所以你所有的 mutation 都应该通过 Vuex store，你可以在 Vue.js devtools 中看到它。

方法一:我们可以通过克隆对象避免Vuex报错，使用watcher提交mutation。

const store = new Vuex.Store({
  strict: true,
  state: {
    formdata: [
      { label: 'A', text: 'some text' },
      { label: 'B', text: 'some other text' },
      { label: 'C', text: ' this is a text' }
    ]
  },
  mutations: {
    updateForm: function (state, form) {
      var index = state.formdata.findIndex(d=> d.label === form.label);
      Object.assign(state.formdata[index], form);
    }
  }
});
    
new Vue({
  el: '#app',
  store: store,
  data () {
    return {
      //deep clone object
      formdata: JSON.parse(JSON.stringify(this.$store.state.formdata))
    };
  },
  computed: {
    formdata() {
      return this.$store.state.formdata
    }
  },
  watch: {
    formdata: function(form)
      this.$store.commit('updateForm', form);
    }
  }
})

方法 2:您可以根据 vuex doc 使用计算的 get/set 来提交您的变更

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}