V-model with Vuex push in the array in the store

Question

Hi, I’m new with vuex and I need a little help:

below is a piece of my code:

<v-btn icon color="purple darken-2" @click="addKeyNames"
                ><v-icon> mdi-plus-circle-outline</v-icon>
              </v-btn>
            </v-col>
          </v-row>

          <v-row v-for="(keyNamesLocal, index) in keyName" v-bind:key="index">
            <v-col id="chave" cols="12" md="4">
              <ValidationProvider
                v-slot="{ errors }"
                name="Nome da Chave"
                rules="required|max:100"
                required
              >
                <v-text-field
                  v-model="keyNamesLocal.name"
                  label="Nome da Chave"
                  :error-messages="errors"
                  :counter="100"
                  required
                />
              </ValidationProvider>
            </v-col>

            <v-col id="chave" cols="12" md="1">
              <v-btn
                icon
                large
                color="purple darken-2"
                @click="removeKeyName(index)"
              >
                <v-icon>mdi-delete-forever-outline</v-icon>
              </v-btn> 

vuex:

export default new Vuex.Store({
  strict: true,
  state: {
    api: {
      id: "",
      name: "",
      description: "",
      developer: "",
      legacy: "",
      endpoint: "",
      releaseDate: "",
      project: "",
      keyNames: [],
      uraType: "",
      xmlOutput: "",
      xmlInput: "",
      codeReturn: "",
      descriptionReturn: "",
      errorTypeReturn: "",
      xmlCodeReturn: "",
      segmentation: ["Controle", "Pós", "Pré", "Next", "Nenhuma"],
      attachment: [],
    },
  },
  mutations: {
    UPDATE_API(state, payload) {
      state.api = Object.assign(state.api, payload);
    },
    createKeyName(state, payload) {
      state.api.keyNames = payload
    },

I need my text-field label: Key Name, record keys inside my array (api.keyNames in store), but it is returning an error.

Error in callback for Watcher "Function () { Return this. _data. $$state }": "Error: [vuex] do not mutate vuex store state Outside Mutation handlers."

Answer 1

I’ll try to help you kkkkkkkk.... When using vuex you should not "mutate" the state without using any mutation, and this yours v-model is doing, in other words, using vuex, do not use v-model in the fields of your vuex... swap the v-model for :value, your v-text-field will look like this:

 <v-text-field
  :value="keyNamesLocal.name"
   label="Nome da Chave"
   :error-messages="errors"
   :counter="100"
   required
   @input="setKeyName($event)"
                />

the @input I added that should call a Mutation of yours, which is in vuex, which will change your keyNamesLocal.name and the name of this Mutation I gave to setKeyName,first let’s declare our attribute keyName...

 api: {
      id: "",
      name: "",
      description: "",
      developer: "",
      legacy: "",
      endpoint: "",
      releaseDate: "",
      project: "",
      keyNames: [],
      uraType: "",
      xmlOutput: "",
      xmlInput: "",
      codeReturn: "",
      descriptionReturn: "",
      errorTypeReturn: "",
      xmlCodeReturn: "",
      segmentation: ["Controle", "Pós", "Pré", "Next", "Nenhuma"],
      attachment: [],
      keyname : "",
    },

now let’s raise her...

  mutations: {
    UPDATE_API(state, payload) {
      state.api = Object.assign(state.api, payload);
    },
    createKeyName(state, payload) {
      state.api.keyNames = payload;
    },
    setKeyName(state, payload) {
      state.api.keyName = payload;
    },

after creating it don’t forget to add in your mapMutations, and now on your button you add you seem to already have Mutation ready with the name addKeyNames, without all the code I can’t be sure...

<v-btn icon color="purple darken-2" @click="addKeyNames"
                ><v-icon> mdi-plus-circle-outline</v-icon>
              </v-btn>

but if you haven’t added your mutations:

 mutations: {
        UPDATE_API(state, payload) {
          state.api = Object.assign(state.api, payload);
        },
        createKeyName(state, payload) {
          state.api.keyNames = payload;
        },
        setKeyName(state, payload) {
          state.api.keyName = payload;
        },
         addKeyNames(state) {
          state.api.keyNames.push(state.api.keyName);
        },