Блог

Главная - Вопросы по программированию - Как использовать v-модель с vuex?

Как использовать v-модель с vuex?

#javascript #vue.js #vuejs2 #vue-component #vuex

#javascript #vue.js #vuejs2 #vue-компонент #vuex

Вопрос:

У меня есть <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?

Ответ №1:

Да, вы можете. Сначала настройте хранилище Vuex для хранения значения и мутации:

Магазин

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

Вам нужен способ вызывать мутацию при изменении модели и обновлять модель при изменении состояния. Вычисляемый сеттер — это элегантный инструмент для обработки обоих направлений и предотвращения неправильного изменения состояния Vuex в компоненте:

Создайте a computed в компоненте:

компонент

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

Это будет работать с шаблоном так, как он есть в вашем сообщении.