Vuex update object's field via v-model

Viewed 20

I'm new at Vue and I want to use vuex object in v-model. I'm using composition type. State like this:

testObject: {
  field1: null,
  field2: null,
  field3: null
}

mutuations like:

export const setObject = (state, obj) = {
  state.testObject = obj
}

vue file like this:

<template>
    <q-item>
        <q-item-section>
            <q-input clearable dense v-model="obj.field1" label="Field1">
                <template v-slot:prepend>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-item-section>
    </q-item>
    <q-item>
        <q-item-section>
            <q-input clearable dense v-model="obj.field2" label="Field2">
                <template v-slot:prepend>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-item-section>
    </q-item>
    <q-item>
        <q-item-section>
            <q-input clearable dense v-model="obj.field3" label="Field3">
                <template v-slot:prepend>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-item-section>
    </q-item>
</template>

<script>
import { useStore, } from 'vuex'
import { computed, defineComponent, onMounted, ref } from "vue";

export default defineComponent({

    setup(props) {
        const $store = useStore()

        const obj = computed({
            get: () => $store.getters['module/getTestObject'],
            set: (value) => $store.commit('module/setTestObject', value)
        })

        return {
            obj
        }
    }
})

</script>

When I used obj like this and I tried to update fields, I got error : [vuex] do not mutate vuex store state outside mutation handlers. Thanks for your help

0 Answers
Related