Двухстороннее связывание с Vuex

Question

У меня есть переменная состояния в хранилище 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, он сказал, что я не должен обновлять значение состояния напрямую? Это то, что я делаю в приведенном выше коде?

Если я не должен этого делать, как я получу значение из опции выбора?

Answer 1

Точно, вы не должны напрямую манипулировать своим состоянием vuex. Вы можете использовать действия Vuex, мутации Vuex и геттеры Vuex для работы с состоянием. Также в вашем компоненте вы можете использовать вычисленные свойства для безопасного получения / установки данных состояния Vuex.

Использование вычисляемого свойства

В вашем шаблоне вы можете использовать вычисляемое свойство и, в частности, определить get и set методы для оборачивания логов магазина c внутри.

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

А затем используйте это вычисленное свойство как 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
    }
  }
})

1. Подробнее о Мутациях здесь https://vuex.vuejs.org/guide/mutations.html
2. Подробнее о Геттерах здесь https://vuex.vuejs.org/guide/getters.html