[vuex] do not mutate vuex store state outside mutation handlers.

[fakedrpanda]

I’m using a q-table to display some data in a table. The data is saved in a vuex store and its giving me an error everytime I change the values with the pop up edit.

Error: [vuex] do not mutate vuex store state outside mutation handlers.

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

How do I properly update the data in the store?

Here is the code for the table:

<template>
    <div >
        <q-table
            :grid="$q.screen.xs"
            class="mytable q-mb-md"
            :title="getFileName"
            :data="getData"
            :columns="columns"
            :row-key="this.getRowKey()"
            :filter="filter"
            :selection="this.turnSelectOn()"
            :selected.sync="selected"
            :visible-columns="getColumnNames"
            virtual-scroll
            :rows-per-page-options="[15, 25, 30, 50, 0]"
        >
            <template v-slot:top-right>
                <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
                <template v-slot:append>
                    <q-icon name="search" />
                </template>
                </q-input>
            </template>
            <template v-slot:body="props">
                <q-tr :props="props">
                    <q-td 
                        v-for="(column) in props.cols"
                        :key="column.name" :props="props"
                        no-hover>
                        {{ props.row[column.name]}}
                        <q-popup-edit v-model="props.row[column.name]">
                        <q-input v-model="props.row[column.name]" dense autofocus counter />
                        </q-popup-edit>
                    </q-td>
                </q-tr>
            </template>
        </q-table>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    name : 'OrderTable',
    computed:{
      ...mapGetters('newdata', ['getData', 'getFileName', 'getColumnNames'])
    },
    data(){
        return{
            filter: '',
            selected: [],
            columns: this.$store.state.newdata.columns,
        }
    },
    methods: {
        getRowKey(){

            const index = this.$store.state.newdata.metadata.requiredColumns.idColumn
            return index
        },
        turnSelectOn(){

            let selectState = 'none';

            if(this.$store.state.newdata.metadata.requiredColumns.idColumn){
                selectState = 'single'
            }

            return selectState
        }
    }
}
</script>

<style lang="scss">
    .mytable{
        height: 500px; 

        .q-table__top,
        .q-table__bottom,
        thead tr:first-child th {
            /* bg color is important for th; just specify one */
            background-color: $secondary;

        }

        .q-table__top{
            .q-field__control-container{
                background-color: white;
            }
        }

        thead tr th {
            position: sticky;
            z-index: 1;
        }

        thead tr:first-child th {
            top: 0;
        }

        .q-table--loading thead tr:last-child th {
            /* height of all previous header rows */
            top: 48px;

            tr:nth-child(2n) {
                background-color: #eeeded;
            }
        }

        
    }
   
</style>

[qyloxe]

@fakedrpanda If you want to use data from vuex in more advanced form, ie searching, querying, updating then i STRONGLY suggest to use this:

https://vuex-orm.org/

With this lib you can build models, those models could consume nested data and normalize them, you have excellent query capabilities and many more. In the context of q-table, you can use those queried data as computed property and this will maintains both reactivity and filtering. Meaning changes to data done via models will reflect to your data views (q-table etc.).

[ArkIv]

https://vuejs.org/v2/api/#vm-set

[fakedrpanda]

@qyloxe Thanks! Ima give it a try.
And look what I found https://www.youtube.com/watch?v=_zKi8qrlgXc

[qyloxe]

@fakedrpanda yep, definitely worth watching his materials. Good catch!