[Vuejs]-Vue store modify data

0👍

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
  }
}

Leave a comment