如何在 vuex 中使用 <select> v-model？

Question

我的模板中有一个 <select>：

<select v-model="amount" required>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="25">25</option>
  <option value="30">30</option>
</select>

data () {
  return {
    amount: '',
  }
}

我能以某种方式将 amount 置于 vuex 状态吗？

Answer 1

是的，你可以。首先，设置您的 Vuex 存储以保存值和突变：

商店

state: {
  amount: null
},
mutations: {
  SET_AMOUNT(state, payload) {
    state.amount = payload;
  }
}

您需要一种在模型更改时调用突变并在状态更改时更新模型的方法。 computed setter 是一个优雅的工具，可以处理两个方向并避免不正确地改变组件中的 Vuex 状态：

在组件中创建一个computed：

组件

computed: {
  amount: {
    get() { return this.$store.state.amount },
    set(value) { this.$store.commit('SET_AMOUNT', value) }
  }
}

这将按照您的 post 中的方式使用模板。

如何在 vuex 中使用 <select> v-model？

How to use <select> v-model with vuex?

javascript

vue.js

vue-component

vuex

vuejs2