Question

我说数组中有10个对象 PageRenderer

使用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)
    }
  }
}

Answer 2

Mine library vuex-dot简化了vuex商店的反应性（当然，v-model）用法

https://github.com/yarsky-tgz/vuex-dot

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      ...takeState('user')
        .expose(['name', 'email'])
        .dispatch('editUser')
        .map()
    }
  }
</script>

Answer 3

我认为有用的另一种方法：

将v模型替换为（v-on）函数
该功能触发突变
变异（商店中的“功能”）更改状态值
吸气剂（商店中的“计算”）“监听”属性值的更改并相应地更改。

这是一个如何使用Vuex（而不是v-model：

触发函数“ updateFilter”的输入：

    <input type="text" placeholder="filter" v-on:input='updateFilter'>

触发突变（提交）的功能（方法）：

  methods: {
updateFilter(event){
  this.$store.commit('updateFilter', event.target.value);
}

store.js中的一个更改数据（状态）的突变：

mutations: {
    updateFilter (state, filter) {
        state.filter = filter; 
    },

状态：

state: {filter: ""}

和“听”状态改变的吸气剂。

getters: {
    filteredGames: state => {
        //your filter code here
          return filtered;
        })
    },

最后，需要过滤的组件具有以下计算方式（getter）：

  computed: {
filtered() {
  return this.$store.getters.filteredGames;
}

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

3 个答案: