Vue store modify data - vue.js

Question

I have use Vue 2 and data in store are:
export default new Vuex.Store({
state: {
"cnf": {
"rad": {
"txf": {
"minE": [1000000, 1000000],
"maxE": [50000000, 50000000]
},
"rxf": {
"minE": [1000000, 1000000],
"maxE": [50000000, 50000000]
},
"filtMod": [0, 0],
"filtCnf": [-999, -999],
"pn": ["", ""],
"sn": ["", ""],
"fw": ["", ""],
"side": [1, 1]
}
}
}
})
In template I need to use (and it is wrong)
<input type="number" v-model="state.cnf.rad.txf.minE[0] / 1000" />
Where can I modify {{ state.cnf.rad.txf.minE[0] }}? In store or template?

Answer 1

You can't directly assign in store using v-model. Instead you can use the store methods like so.
Foo.vue
<input type="number" v-model="num" #input="setNum()" />
data() {
return {
num: 0
}
},
methods: {
setNum() {
// num here is passed as a payload in store
// commit is a built-in vuex method to call store actions
// setNumMutation is the name of mutation in store
this.$store.commit('setNumMutation', num);
}
}
Store
state: {
"cnf": {
"rad": {
"txf": {
"minE": [1000000, 1000000],
"maxE": [50000000, 50000000]
},
"rxf": {
"minE": [1000000, 1000000],
"maxE": [50000000, 50000000]
},
"filtMod": [0, 0],
"filtCnf": [-999, -999],
"pn": ["", ""],
"sn": ["", ""],
"fw": ["", ""],
"side": [1, 1]
}
}
},
mutations: {
setNumMutation(state, payload) {
state.cnf.rad.txf.minE[0] = payload / 1000
}
}