我在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存储原理时,它说我不应该直接更新状态值吗?我在上面的代码中就是这样吗?
如果我不应该这样做,如何从选择选项中获取值?
确实,您不应该直接操纵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)
}
}
然后将此计算的属性用作您选择的[v0]的v模型
v-model="paymentMethod"
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的更多信息