使用vuex v模型指定对象值

时间:2018-06-22 20:18:55

标签: javascript vue.js

我正在将输入元素与处于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中的setv-model函数引用对象

1 个答案:

答案 0 :(得分:3)

再次考虑您的问题。一种解决方案可能是在这里提出的建议: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/

不确定这是否是最佳解决方案,但似乎可行