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

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

您需要一種在模型更改時調用突變並在狀態更改時更新模型的方法。 計算的 setter是一個優雅的工具，可以處理兩個方向並避免在組件中不正確地改變 Vuex 狀態：

在組件中創建一個computed ：

零件

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

這將與模板在您的帖子中一樣使用。