时间戳

首页 > 解决方案 > Vuex 的双向绑定

javascript - Vuex 的双向绑定

问题描述

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

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

标签： javascriptvue.jsvuex

解决方案

确切地说，您不应该直接操纵您的 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. 在此处阅读有关Getters的更多信息https://vuex.vuejs.org/guide/getters.html

推荐阅读