v-data-table & store & [vuex] do not mutate vuex ...

[pmpetit]

Hi,
i try to change a boolean value in a table, that comes from the store, i have error.

client.js?06a0:103 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:135)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:893)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at Watcher.run (vue.runtime.esm.js?2b0e:4584)
    at Watcher.update (vue.runtime.esm.js?2b0e:4558)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Object.reactiveSetter [as done] (vue.runtime.esm.js?2b0e:1055)
    at Proxy.set (vue.runtime.esm.js?2b0e:1077)
    at callback (WaitingCartTable.vue?51a0:27)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)

searching similar errors, i always see example with 1 message (https://vuex.vuejs.org/guide/forms.html#two-way-computed-property)

but how can i deal with this example ?
thanks

(here is the code from my .vue file)

<template>
  <div>
  <v-app id="inspire">
    <div>
      <v-data-table
        v-if="waitingCart"
        :headers="headers"
        :items="waitingCart"
        class="elevation-1"
      >
        <template v-slot:[`item.done`]="{ item }">
          <v-checkbox
            v-model="item.done"
          ></v-checkbox>
        </template>
      </v-data-table>
    </div>
  </v-app>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "waitingCartTable",
  data () {
    return {
      headers: [
        {
          text: 'IdCmd',
          align: 'start',
          sortable: false,
          value: 'idcmd',
        },
        { text: 'Nom', value: 'name' },
        { text: 'Qt', value: 'qt' },
        { text: 'Prix', value: 'price' },
        { text: 'Le', value: 'dt' },
        { text: 'Fait', value: 'done' }
      ]
    }
  },
  computed: {
    ...mapGetters("product", ["waitingCart"])
  }
};
</script>

<style>
</style>

and in the in store:

--the state
export default function () {
  return {
    waitingCart: []
  }
}

--the getter
export function waitingCart (state) {
  return state.waitingCart
}

--the setter
export function setWaitingCart(state, val) {
  state.waitingCart = val
}

[Frodo1980]

Hi,

sorry - not much time right now and I have to say that I am not a pro, but I think you should dispatch an action in your component which then commits a mutation. Both, action and mutation, you have to install in your vuex-store. With that you can change the values in your state. The Docs of vuex will help you. Just search youtube for "vuex action mutation"

Greeting from germany

Michael