Vuex如何跟踪索引并将其传递给组件？答案

【问题标题】：Vuex How to track index and pass it to component?Vuex如何跟踪索引并将其传递给组件？
【发布时间】：2019-04-20 10:23:13
【问题描述】：

我有两个从 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}}

【问题讨论】：

你在商店里跟踪它

标签： vue.js vuex

【解决方案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 存储的情况下执行此操作。只需使用组件的数据

【讨论】：