Vuex Как отследить индекс и передать его компоненту?

Question

У меня есть два компонента, которые получают данные из 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}}

Answer 1

Вы должны сохранить данные, которые хотите передать, во второй элемент.Например, вы хотите передать выбранный индекс первого компонента, а затем сохранить выбранный объект в хранилище:

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.Просто используйте данные компонента