NUXT 将数据传递给动态端点中的道具答案

【问题标题】：NUXT Passing data to props in dynamic endpointNUXT 将数据传递给动态端点中的道具
【发布时间】：2020-05-05 13:03:36
【问题描述】：

这是一个关于 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>

【问题讨论】：

标签： vuex nuxt.js

【解决方案1】：

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

const store = new Vuex.Store({
  state: {
    events: [{
        id: 1,
        name: 'Wordpress',
        price: 100
      },
      {
        id: 2,
        name: 'VueJS',
        price: 200
      },
      {
        id: 3,
        name: 'React',
        price: 300
      }
    ]
  },
  getters: {
    event: state => id => {
      return state.events.find(event => event.id === id)
    }
  }
})

new Vue({
  store,
  el: "#app",
  data() {
    return {
      routeId: 2
    }
  },
  computed: {
    myEvent() {
      return this.$store.getters.event(this.routeId)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <h2>event:</h2>
  <p>Name: {{ myEvent.name }}</p>
  <p>Price: {{ myEvent.price }}</p>
</div>

然后就可以从当前页面路由this.$route.params.id获取id并传入getter

myEvent() {
    return this.$store.getters.event(this.$route.params.id)
}

【讨论】：