使用 vuex v-model 指定对象值答案

【问题标题】：Specify object value with vuex v-model使用 vuex v-model 指定对象值
【发布时间】：2018-06-22 20:18:55
【问题描述】：

我正在协调输入元素与 Vuex 状态下对象的键。假设我有这个对象：

myObj: { foo: 1, bar: 2 }

以及组件中的计算属性：

myObjVals: {
  get(){ return this.$store.state.myObj },
  set(//?) { //? },
},

在模板中，我可以从商店获取值：

<input type="number" v-model="myObjVals['foo']"/>  // displays "1"
<input type="number" v-model="myObjVals['bar']"/>  // displays "2"

但是当我调整输入的值时，我收到错误：“不要在突变处理程序之外改变 vuex 存储状态。”

这里一个明显的解决方案是为 myObj... 中的 each 键设置不同的计算属性...但是对于较大的对象，这会变得重复/繁琐。我想知道是否有任何方法可以像我在上面尝试的那样对此进行编码，即仅使用一个计算属性来引用v-model 中get 和set 函数的对象。

【问题讨论】：

我不认为这是可能的，因为 VueJS 无法知道它应该使用对象的 setter 而不是直接改变它从状态中获得的对象。一种方法是使用 Vuex 的 mapState 来帮助生成所需的 getter (vuex.vuejs.org/guide/state.html#the-mapstate-helper)。编辑：当然你也可以使用 vuex 的非严格模式
啊哈 - 这是一种传递引用错误，不是吗？
将查看mapState，谢谢。
是的。您正在获取整个对象，并且通过访问模型中的不同属性，您可以在不使用 setter 的情况下更改对象。至少我相信是这样的。您是否尝试过使用 setter 并从那里为对象调用 Vuex 突变？
那是我不确定的。如果您对 whole 对象执行计算属性，然后更改 v-model 内的属性值，是否还会调用 setter。我会假设 settter 甚至没有被调用。而且我也相信你不能写一个基于键的自定义设置器。

标签： javascript vue.js

【解决方案1】：

再想想你的问题。这里建议一种解决方案：https://vuex.vuejs.org/guide/forms.html

<input type="number" :value="myObjVals['foo']" @input="changeMyObj('foo', $event)"/>  // displays "1"
<input type="number" :value="myObjVals['bar']" @input="changeMyObj('bar', $event)"/>  // displays "2"

带有计算属性和方法：

computed: {
    myObjVals: function () {
        return this.$store.state.myObj
    }
},
methods: {
    changeMyObj(key, evt) {
        this.$store.commit('changeMyObj', {key: key, value: evt.data})
    }
}

在商店内发生突变：

mutations: {
  changeMyObj(state, objInput) {
    state.myObj[objInput.key] = objInput.value
  }
}

这是一个“工作”的小提琴：http://jsfiddle.net/zfab6tzp/346/

不确定这是否是最好的解决方案，但它似乎正在工作

【讨论】：

太棒了，工作，谢谢！我注意到您的小提琴有两个版本：@input="changeMyObj('foo', $event)"> 和 @input="(value) => { changeMyObj('bar', value) }" ...在您看来是首选？
哦。我不相信内联函数工作正常。但我会假设另一个版本（带有直接函数调用）更可取，因为它不会生成多个匿名函数。
明白了。是的，我有第一个插件，它确实有效。谢谢！