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

Question

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

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

这里是 fiddle link。 https://jsfiddle.net/dmf2crzL/41/

Answer 1

我们假设您希望将 v-model 用于 2-way 绑定以及 Vuex 存储。

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

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

所以你所有的变异都应该通过 Vuex 存储，你可以在 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：您可以使用计算 get/set 根据 vuex doc

提交您的变更

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

Answer 2

我的库 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-model 替换为 (v-on) 函数
该函数触发突变
突变（"function" 在商店中）改变状态中的一个值
a getter（"computed" 在商店）"listens" 到属性值的变化并相应地变化。

这是一个如何使用 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: ""}

和getter（计算）"listens"到状态的变化。

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

最后，需要过滤的组件有这个计算 (getter):

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

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

How to update Vuex store from v-model input in case of v-for

vue.js

vuex