Vuex 的雙向綁定

Question

我在商店 Vuex 中有一個狀態變量，如下所示：

let state = {
    order: {
        payment_method: 'Credit card',
    }
};

export default state;

然后，我的模板：

<select id="payment_method" class="w-full form-control form-select"
        v-model="order.payment_method">
    <option value="Credit Card">Credit Card</option>
    <option value="COD">COD</option>
</select>

當我更改我的選擇選項時，我的狀態order將被更新。 但是，我應該這樣做嗎，因為當我閱讀Vuex store原理時，它說我不應該直接更新狀態值？ 這是我在上面的代碼中做的方式嗎？

如果我不應該這樣做，我將如何從選擇選項中獲取值？

Answer 1

確切地說，您不應該直接操縱您的 vuex 狀態。 您可以使用 Vuex Actions 、 Vuex Mutations 和 Vuex Getters 來處理狀態。 同樣在您的組件中，您可以使用計算屬性來安全地獲取/設置 Vuex 狀態數據。

使用計算屬性

在您的模板中，您可以使用計算屬性並專門定義用於包裝存儲邏輯的get和set方法。

<select v-model="paymentMethod">
    <option value="Credit Card">Credit Card</option>
    <option value="COD">COD</option>
</select>

{
  computed : {
    paymentMethod : {
      get() { return this.$store.getters.orderPaymentMethod },
      set(value) { return this.$store.commit('SET_ORDER_PAYMENT_METHOD', value)
    }
}

然后將此計算屬性用作 v-model 以供您選擇v-model="paymentMethod"

將 Mutation 和 Getter 添加到您的商店

export const SET_ORDER_PAYMENT_METHOD = 'SET_ORDER_PAYMENT_METHOD'
const store = new Vuex.Store({
  state: {
    order: {
      payment_method: 'Credit Card'
    }
  },
  mutations : {
    [SET_ORDER_PAYMENT_METHOD] (state, method) {
       /* optional value validation here */
       state.order.payment_method = method;
    }
  },
  getters: {
    orderPaymentMethod: state => {
      /* optional filtering or else, ... */
      return state.order.payment_method
    }
  }
})

1. 在此處閱讀有關Mutations 的更多信息https://vuex.vuejs.org/guide/mutations.html
2. 在此處閱讀有關Getters 的更多信息https://vuex.vuejs.org/guide/getters.html