I am using Vue3's Composition API and would like to store some search parameters in my store.
My state:
const state = () => ({
selection: {
selected_cabins: "M",
flight_type: "round",
adults: 1,
children: 0,
infants: 0,
pets: 0,
fly_from: "",
fly_to: "",
start_date: "",
return_date: "",
},
});
I'm trying to use it like so:
<q-select
borderless
:options="flightType"
v-model="selection.flight_type"
option-value="value"
emit-value
map-options
/>
Computed Property:
const selection = computed({
get() {
return store.state.flights.selection;
},
set(val) {
store.commit("flights/SET_SELECTION", val);
},
});
But I am still getting the error that I cannot mutate state outside of a mutation.
If I break the object (selections) down to its properties I can get it to work, but thats really verbose. Is there anyway to do the above with an object as I have it?
In v-model you're accessing the nested state value which mutates that state, the right syntax should be like :
v-model="flight_type"
and in the setter spread the state with modified property :
const flight_type = computed({
get() {
return store.state.flights.selection.flight_type;
},
set(val) {
store.commit("flights/SET_SELECTION",
{...store.state.flights.selection,flight_type:val);
},
});