如果是v-for,如何从v-model输入更新Vuex存储

Question

我说数组中的10个对象就像 policies = [{name:'a',text:''},{name:'b',text:''},....]

它们使用v-for进行迭代以显示标签A:输入框,文本属性绑定为v-model.每当策略文本在v-model中发生变化时,我都想触发变异.

这是它的小提琴链接. https://jsfiddle.net/dmf2crzL/41/

Answer 1

我们假设您想要同时使用v-model的双向绑定和Vuex存储.

您的问题是您希望Vuex存储在严格模式下

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

所以你的所有变异都应该通过Vuex商店,你可以在Vue.js devtools中看到它.

方法1:我们可以通过使用克隆对象并使用观察者提交变异来避免Vuex错误.

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:您可以使用计算的get/set根据vuex doc提交您的变异

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