### 回答1：
首先，在点击行的时候，需要调用一个方法，将该行的 id 存入 Vuex 中。假设我们在 表格 的每一行中都有一个 `id` 字段，可以这样实现：
```html
<!-- 表格 -->
<template>
<div>
<table>
<thead>
<tr>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index" @click="goToDetail(item.id)">
<td>{{ item.name }}</td>
<td><button @click="deleteItem(index)">
删除</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "商品1" },
{ id: 2, name: "商品2" },
{ id: 3, name: "商品3" }
]
};
},
methods: {
goToDetail(id) {
this.$store.commit("setItemId", id); // 将 id 存入 Vuex 中
this.$router.push("/detail"); //
跳转到详情
页面
},
deleteItem(index) {
//
删除当前行
this.list.splice(index, 1);
}
}
};
</script>
```
在上面的代码中，我们调用了 `goToDetail` 方法，在该方法中，将
当前行的 id 存入 Vuex 中，并且
跳转到详情
页面。
接下来，在详情
页面中，我们可以通过 `mapState` 方法获取到 Vuex 中的 `itemId` 值，从而获取到
当前行的 id 值。代码如下：
```html
<!-- 详情
页面 -->
<template>
<div>
<h2>商品详情</h2>
<p>
当前商品的 id 为： {{ itemId }}</p>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["itemId"]) // 获取 Vuex 中的 itemId 值
}
};
</script>
```
在上面的代码中，我们使用了 `mapState` 方法，将 `itemId` 映射到
当前组件的计算属性中，从而可以在模板中使用。
### 回答2：
在Vue中实现点击某一行
跳转到对应
页面并把
当前行的id存入Vuex中，然后在对应
页面中获取到该id的值，可以按照以下步骤进行代码实现：
1. 创建一个Vue实例，并初始化Vuex。
```javascript
// main.
js
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
selectedId: '' // 用于存储选中行的id
},
mutations: {
setSelectedId(state, id) { // 设置选中行的id
state.selectedId = id;
}
}
});
new Vue({
store,
render: (h) => h(App)
}).$mount('#app');
```
2. 创建一个列表组件，并在模板中渲染行
数据和添加点击事件。
```javascript
// List.vue
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id" @click="handleClick(item.id)">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [ // 假设列表
数据
{ id: 1, name: '行
数据1' },
{ id: 2, name: '行
数据2' },
{ id: 3, name: '行
数据3' }
]
};
},
methods: {
handleClick(id) { // 处理行点击事件
this.$store.commit('setSelectedId', id); // 存储选中行的id
//
跳转到对应
页面，例如使用Vue Router进行路由
跳转
this.$router.push('/detail');
}
}
};
</script>
```
3. 创建一个详情
页面组件，并从Vuex中获取选中行的id。
```javascript
// Detail.vue
<template>
<div>
<p>详情页</p>
<p>选中行的id：{{ selectedId }}</p>
</div>
</template>
<script>
export default {
computed: {
selectedId() { // 从Vuex中获取选中行的id
return this.$store.state.selectedId;
}
}
};
</script>
```
以上就是在Vue中点击某一行
跳转到对应
页面并把
当前行的id存入Vuex中，然后在对应
页面中获取到该id的值的实现代码。其中，通过点击事件将id存入Vuex中，然后在
跳转的
页面中使用computed属性来获取该id值。
### 回答3：
在Vue中实现点击某一行
跳转到对应
页面，并将
当前行的id存入Vuex中，然后在对应
页面中获取到该id的值，可以按照以下步骤进行实现：
1. 在Vue项目中安装并引入Vuex：
```bash
npm install vuex
```
```
js
// main.
js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
selectedRowId: null // 初始值为null
},
mutations: {
setSelectedRowId(state, id) {
state.selectedRowId = id
}
}
})
new Vue({
store, // 注入store实例
render: h => h(App),
}).$mount('#app')
```
2. 在某个组件中，例如Table.vue，在点击行的事件中调用Vuex的mutation方法来修改选中行的id，并
跳转到对应
页面：
```vue
<template>
<div>
<table>
<tr v-for="row in rows" :key="row.id" @click="selectRow(row)">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
methods: {
selectRow(row) {
this.$store.commit('setSelectedRowId', row.id)
this.$router.push('/details') //
跳转到详情
页面
}
}
}
</script>
```
3. 在对应的详情
页面中，例如Details.vue，通过计算属性获取到Vuex中存储的选中行的id：
```vue
<template>
<div>
<h1>详情页</h1>
<div>{{ selectedRowId }}</div>
</div>
</template>
<script>
export default {
computed: {
selectedRowId() {
return this.$store.state.selectedRowId
}
}
}
</script>
```
这样，当在Table.vue中点击某一行时，会
跳转到详情
页面，并且在详情
页面中可以通过`selectedRowId`获取到该行的id值。
112
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
