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