与Vuex双向绑定

问题描述 投票:1回答:1

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

如果我不应该这样做,如何从选择选项中获取值?

javascript vue.js vuex
1个回答
0
投票

确实,您不应该直接操纵vuex状态。您可以使用Vuex Actions,Vuex Mutations和Vuex Getters处理状态。同样,在您的组件中,您可以使用计算出的属性安全地获取/设置Vuex状态数据。

使用计算属性

在模板中,您可以使用计算属性,并专门定义getset方法来包装存储逻辑。

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

然后将此计算的属性用作您选择的[v0]的v模型

向您的商店添加变异和吸气剂

v-model="paymentMethod"
  1. 在此处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 } } }) 阅读有关Mutations的更多信息
  2. 在[https://vuex.vuejs.org/guide/mutations.html]上了解有关信件]的更多信息>
© www.soinside.com 2019 - 2024. All rights reserved.