VUE3 - object 上的 VUEX v 模型

Question

我正在使用 Vue3 的 Composition API 并想在我的商店中存储一些搜索参数。

我的 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: "",
    },
});

我正在尝试像这样使用它：

<q-select
  borderless
  :options="flightType"
  v-model="selection.flight_type"
  option-value="value"
  emit-value
  map-options
/>

计算属性：

const selection = computed({
            get() {
                return store.state.flights.selection;
            },
            set(val) {
                store.commit("flights/SET_SELECTION", val);
            },
        });

但我仍然收到无法在mutation之外对 state 进行 mutate 的错误。

如果我将 object ( selections ) 分解为它的属性，我可以让它工作，但这真的很冗长。 有没有办法像我一样用 object 来做上面的事情？

Answer 1

在v-model中，您正在访问嵌套的 state 值，该值会改变 state，正确的语法应该如下所示：

v-model="flight_type"

并在 setter 中传播具有修改属性的 state：

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);
            },
        });