Vuex - состояние мутации с данными строки таблицы начальной загрузки при щелчке строки

Question

Я хотел бы установить свое состояние с данными из строки, по которой щелкнули, в таблице начальной загрузки.

Сейчас у меня есть настройки стола следующим образом:

 <b-table striped
             hover
             responsive
             :filter="filter"
             :items="products"
             :fields="fields"
             v-b-modal.EditProductModal
             @row-clicked="setRow"></b-table>
  </b-row>

Мое состояние:

 state: { // data
products: [],
addeditproduct: {
  name: '',
  description: '',
  externalid: '',
  active: '',
  id: ''
}
},

Мое действие

setRow: function ({commit}) {
      commit('setRowToState')
    }

Моя мутация

setRowToState (state) {
      state.addeditproduct.name = ''
      state.addeditproduct.description = ''
      state.addeditproduct.externalid = ''
      state.addeditproduct.active = ''
      state.addeditproduct.id = ''
    },

Сейчас он стирает состояние, но вместо этого я хотел бы получить данные из строки и заполнить состояние этими данными.

Есть предложения?

Answer 1

Я предполагаю, что вы используете Bootstrap Vue, реквизиты компонентов выглядят аналогично.

Компонент b-table здесь с событием row-clicked возвращает три аргумента.

1. строка данных
2. индекс строки
3. собственный объект события

Вам необходимо переписать ваше действие и мутацию, чтобы использовать эти данные строки, возвращенные вместе с событием, и обновить состояние. Код следует.

Действие:

setRow: function ({commit}, rowData) {
      commit('setRowToState', rowData)
    }

Мутация:

setRowToState (state, rowData) {
      state.addeditproduct.name = rowData.name
      state.addeditproduct.description = rowData.description
      state.addeditproduct.externalid = rowData.externalid
      state.addeditproduct.active = rowData.active
      state.addeditproduct.id = rowData.id
    },