vue中点击某一行，跳转到对应页面，并把当前行的id 通过 this.$store.commit存入vuex中定义，在对应页面中获取到该id的值，举例用代码实现

假设我们有一个表格，其中每一行都有一个唯一的id，我们想要点击某一行后跳转到对应页面，并且把该行的id存入vuex中。下面是一个简单的实现：

在列表页中，我们可以在表格的模板中给每一行添加一个点击事件，点击时触发一个方法并传入该行的id作为参数：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in itemList" :key="item.id" @click="handleClick(item.id)">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button @click="editItem(item.id)">Edit</button>
            <button @click="deleteItem(item.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

在methods中，我们定义了一个handleClick方法，它会把传入的id存入vuex中：

<script>
export default {
  name: 'ItemList',
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  methods: {
    handleClick(id) {
      this.$store.commit('setItem', id);
      this.$router.push(`/item/${id}`);
    },
    editItem(id) {
      // ...
    },
    deleteItem(id) {
      // ...
    },
  },
};
</script>

在这个例子中，我们调用了this.$store.commit('setItem', id)来存储id，然后使用this.$router.push(`/item/${id}`)跳转到对应的页面。在跳转的时候，我们把id作为路由参数传递了进去。

在对应的页面中，我们可以使用$route.params来获取到路由参数，然后从vuex中获取到该id的值：

<template>
  <div>
    <h1>Item {{ id }}</h1>
    <p>{{ itemDescription }}</p>
  </div>
</template>

<script>
export default {
  name: 'ItemDetail',
  computed: {
    id() {
      return parseInt(this.$route.params.id);
    },
    itemDescription() {
      const item = this.$store.state.items.find((item) => item.id === this.id);
      return item ? item.description : '';
    },
  },
};
</script>

在这个例子中，我们使用了computed属性来获取到路由参数的id，并且使用它从vuex中获取到了该id对应的item的description。请注意，我们在vuex中存储的是id，而不是整个item对象。这样做的好处是可以减少vuex中存储的数据量，从而提高性能。