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