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

【问题标题】：How to use <select> v-model with vuex?如何在 vuex 中使用 <select> v-model？
【发布时间】：2021-02-22 19:36:45
【问题描述】：

我的模板中有一个<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 状态吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案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) }
  }
}

这将与模板在您的帖子中一样使用。

【讨论】：