使用 vuex v-model 指定对象值

Question

我正在协调输入元素与 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但对于较大的对象，这会变得重复/繁琐。我想知道是否有任何方式的代码作为此我试图以上，即，仅使用一个计算的属性来引用对象两者get和set功能v-model。

Answer 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/

不确定这是否是最好的解决方案，但它似乎有效