NUXT将数据传递到动态端点中的道具

Question

这是关于NUXT和Vuex的问题。我想在我的动态（_id）页面上获取适当的项目。

我的状态中有一个数组：

export const state = () => ({
  events: [
    { id: 1, name: 'Wordpress', price: 100 },
    { id: 2, name: 'VueJS', price: 200 },
    { id: 3, name: 'React', price: 300 },
    { id: 4, name: 'Angular', price: 500 },
    { id: 5, name: 'NodeJS', price: 5000 }
  ]
})

我有一个EventList组件，该组件如下循环遍历上面的数组：

<template>
  <div class="event-list">
    <nuxt-link v-for="event in events" :key="event.id" :to="'/events/' + event.id">
      <EventPreview
        :id="event.id"
        :name="event.name"
        :price="event.price"
      />
    </nuxt-link>
  </div>
</template>

但是，当我单击nuxt-link时，它确实会转到_id页面，但是...它没有传递所单击的对象。

如何将那个对象带到_id页面？我所说的对象，例如，{ id: 1, name: 'Wordpress', price: 100 }。

您是否需要其他信息（除了下面的内容之外，请询问。）>

---

其他信息如下：

EventPreview组件的代码：

<template>
  <div class="single-event">
    <h1>Name: {{ name }}</h1>
    <h1>Price: {{ price }}</h1>
  </div>
</template>

<script>
export default {
  name: 'EventPreview',
  props: {
    id: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    price: {
      type: Number,
      required: true
    }
  }
}
</script>
[_id页面代码：

<template>
  <div class="event-id">
    <EventPreview />
  </div>
</template>

<script>
import EventPreview from '@/components/Event/EventPreview'
export default {
  components: {
    EventPreview
  }
}
</script>

这是关于NUXT和Vuex的问题。我想在我的动态（_id）页面中获得适当的项目。我的状态为数组：export const state =（）=>（{事件：[{id：1，名称：'...

Answer 1

您可以创建一个vuex存储来保留事件数据，然后创建一个getter以通过ID获取相关事件。