vue中点击某一行,跳转到对应页面,并把当前行的id存入vuex中定义,在对应页面中获取到该id的值,代码实现
时间: 2023-06-16 11:03:20 浏览: 150
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
首先,在点击行时,可以通过`@click`事件获取到当前行的数据,假设该数据中包含了一个名为`id`的属性,可以通过以下方式将其存入 Vuex 中:
```
// 在组件中引入 Vuex
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['setSelectedId']),
handleRowClick(row) {
// 将当前行的 id 存入 Vuex
this.setSelectedId(row.id)
// 跳转到对应页面
this.$router.push('/detail')
}
}
}
```
其中,`setSelectedId`是一个在 Vuex 中定义的 action,用于将当前行的 id 存入 Vuex:
```
// 在 Vuex 中定义 setSelectedId action
export default {
actions: {
setSelectedId({ commit }, id) {
commit('SET_SELECTED_ID', id)
}
},
mutations: {
SET_SELECTED_ID(state, id) {
state.selectedId = id
}
},
state: {
selectedId: null
}
}
```
接下来,在对应页面中,可以通过`mapState`将`selectedId`从 Vuex 中获取到:
```
// 在组件中引入 Vuex
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['selectedId'])
}
}
```
这样就可以在对应页面中获取到当前行的 id 了,可以在页面中根据该 id 进行数据获取和展示。
阅读全文