VUE3 - 对象上的 VUEX v 模型

Question

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

我的状态：

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.

之外改变状态的错误

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

Answer 1

在 v-model 中，您正在访问会改变该状态的嵌套状态值，正确的语法应该类似于：

v-model="flight_type"

并在 setter 传播修改后的状态属性 :

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

VUE3 - 对象上的 VUEX v 模型

VUE3 - VUEX v-model on an object

javascript

vuejs3

vue-composition-api