javascript - 与Vuex的双向绑定(bind)

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>

当我更改选择选项时，我的状态订单将会更新。但是，我应该这样做吗，因为当我阅读 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. 在此处了解有关 setter/getter 的更多信息 https://vuex.vuejs.org/guide/getters.html