javascript - Určiť hodnotu objektu s vuex v-model

Koordinujem vstupné prvky s kľúčmi objektu v stave Vuex. Povedzme, že mám tento objekt:

myObj: { foo: 1, bar: 2 }

A počítaná vlastnosť v komponente:

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

V šablóne môžem získať hodnoty z obchodu:

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

Ale keď nastavím hodnotu na vstupe, dostanem chybu: „Nemeníte stav vuex store mimo handlerov mutácií.“

Jedným z očividných riešení je mať inú vypočítanú vlastnosť pre každý kľúč v myObj... ale pri väčších objektoch je to opakujúce sa a zdĺhavé. Zaujímalo by ma, či existuje nejaký spôsob, ako to zakódovať tak, ako sa to snažím vyššie, teda použitím len jednej vypočítanej vlastnosti na odkazovanie na objekt pre obe funkcie get a set vo v-model.

Odpoveď č. 1

Ešte raz premýšľaj o svojom probléme. Jedno riešenie by mohlo byť niečo, čo je navrhnuté tu: 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"

s vypočítanou vlastnosťou a metódou:

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

S mutáciou vo vnútri obchodu:

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

Tu je „fungujúci“ fiddle: http://jsfiddle.net/zfab6tzp/346/

Nie som si istý, či je toto najlepšie možné riešenie, ale zdá sa, že to funguje