Vue store modify data-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

Is there a solution to have the adjusted value in the v-model from the start? (there was no 0)

I thought

import store from '@/store/index.js';

export default {
  data() {
    return {
      num: store.state.cnf.rad.txf.minE[0] / 1000
    }
  }
}

I wouldn't have to use @input. It's good idea?