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 存储原理时，它说我不应该直接更新状态值？我在上面的代码中是这样做的吗？

如果我不应该这样做，我将如何从选择选项中获取值？

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"

向您的商店添加 Mutations 和 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. 在此处https://vuex.vuejs.org/guide/mutations.html 阅读有关 突变 的更多信息
2. 在此处https://vuex.vuejs.org/guide/getters.html 阅读有关 Getters 的更多信息