Vuex mutation inside v-for applied to an object in a list

gumball3000

Hello, I used this guide to create a store with vuex and I successfully added some properties with it: https://quasar.dev/quasar-cli/vuex-store

But, I get this error: “Error: [vuex] do not mutate vuex store state outside mutation handlers.” when I update an object from a list of objects I have in the store.

The error appears when I drag the slider as the model is a property of my object:

                  <q-list dark style="max-width: 400px" dense>
                    <q-item clickable v-ripple v-for="feature in features" :key="feature.id">
                      <q-item-section>
                        <q-item-label>{{feature.name}}</q-item-label>
                        <q-slider v-model="feature.value" :min="-1" :max="1" :step="0.1" snap label/>
                      </q-item-section>
                    </q-item>
                  </q-list>

The object in state.js looks something like this:

    features: [
      {
        id: 0,
        name: "feature 1",
        value: 0
      },
      {
        id: 1,
        name: "feature 2",
        value: 0
      }]

I do have a computed property but it doesn’t seem to help, it works fine when I only have one property.

      computed: {
        features: {
          get() {
            return this.$store.state.characterCreator.features
          },
          set(val) {
            this.$store.commit('characterCreator/updateFeatures', val)
          }
        }
      }

The application works and the state does get persisted but I get that error in the console and wish to get rid of it if anyone knows how.

dobbel

@gumball3000 that’s because you update an entire object instead a single property in the setter. Setter’s don’t play nice with objects if you use v-model and vuex. It’s a Vue thing not specifically Quasar.

gumball3000

I know it doesn’t have anything to do with Quasar, I am just asking if anyone had to do something like this before or if anyone can give me an idea on how to go about it.

dobbel

@gumball3000 here are several solutions;

https://forum.vuejs.org/t/error-form-binding-with-vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers/11941/11

gumball3000

@dobbel thanks for the link, here is how I made it work:

I used :value and @input for the slider instead of v-model

                  <q-list dark style="max-width: 400px" dense>
                    <q-item clickable v-ripple v-for="feature in features" :key="feature.id">
                      <q-item-section>
                        <q-item-label>{{feature.name}}</q-item-label>
                        <q-slider :value="feature.value" :min="-1" :max="1" :step="0.1" snap label
                                  @change="updateFeature(feature.id, $event)"/>
                      </q-item-section>
                    </q-item>
                  </q-list>

I created a function that gets triggered on @input, it takes the id of the object and the value of the slider:

        updateFeature(id, e) {
          console.log(e,id)
          let pl = {id: id, value: e}
          this.$store.commit('characterCreator/updateFeature', pl)
        }
      }

Here is how my mutation looks now:

export const updateFeature = (state, pl) => {
  console.log(pl.id, pl.value)
  state.features[pl.id].value = pl.value
}

dobbel

@gumball3000 Great! I was wondering: does the slider value still reactivity change if the features in the store are changed by for example another component?

gumball3000

I tested it and yes the slider moves to the correct position when changing the values in the store, and, of course, the sliders are still there when I navigate to another page and then go back.