Vue.js Vuex如何跟踪索引并将其传递给组件？

我有两个组件从vuex获取数据。第一个组件是带有图像的滑块。当你们点击图片时，第二个组件应该显示每个图片的信息。如何跟踪索引并将其传递给第二个组件以显示正确的信息

这是我的商店：

sideSwiperItems: [
  {
    id: "001",
    smallImage: require("@/assets/jpg/sideMenu-01.jpg"),
    data: [
      {
        height: "100 ft",
        widht: "10 ft",
      },
    ],
  },
  {
    id: "002",
    smallImage: require("@/assets/jpg/sideMenu-02.jpg"),
    data: [
      {
        height: "200 ft",
        widht: "20 ft",
      },
    ],
  },

第一部分

swiper-slide.swiper__thumb-position(
        v-for='(item, idx) in this.$store.state.buildingData.sideSwiperItems' 
        :key='idx'  
        :class=`'slide-'+(idx+1)`
      ) {{item.smallImage}}

第二部分

div(
 v-for=`(item, idx) in this.$store.state.buildingData.sideSwiperItems`
 :key='idx'
)
 p.side__block-month
  | {{item.data.height}}
  | {{item.data.width}}

---

您必须存储要传递到第二个元素中的数据。 例如，如果要传递第一个组件的选定索引，则必须将选定对象存储到存储中：

sideSwiperItems: [
 ...
],
selectedObject: null

可以像这样轻松地指定选定对象

swiper-slide.swiper__thumb-position(
        v-for='(item, idx) in this.$store.state.buildingData.sideSwiperItems'
        @click="onClick"
        :key='idx'  
        :class=`'slide-'+(idx+1)`
        ) {{item.smallImage}}

methods: {
 onClick: (item) => {
  this.$store.state.buildingData.selectedObject = item
 }
}

---

如果第一个和第二个元素位于同一组件中，则无需将选定对象指定到Vuex存储中即可执行此操作。只需使用组件的数据

即可在存储中跟踪它