Nuxt动态_id页面如何获取Vuex中对应的Event对象？

我来帮你搞定这个问题！要把点击的事件对象传递到_id动态页面，这里有几种实用的方案，推荐优先用Vuex状态管理的方式，最稳妥也符合最佳实践：

方案一：利用Vuex Getter 根据ID查找事件（最优解） #

既然你的事件数据已经存在Vuex的state里，直接通过ID从store中查找对应的对象就好，不用额外传递，还能避免数据冗余。

第一步：在Vuex Store中添加Getter #

修改你的store文件，添加一个根据ID获取事件的getter：

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 }
  ]
})

// 添加这部分getter
export const getters = {
  getEventById: (state) => (id) => {
    // 注意把传入的id转成数字，和state里的id类型匹配
    return state.events.find(event => event.id === parseInt(id))
  }
}

第二步：在_id页面中获取事件对象 #

修改_id页面的代码，通过路由参数拿到ID，再调用getter获取对应的事件，最后传递给EventPreview组件：

<template>
  <div class="event-id">
    <!-- 加个v-if避免未找到事件时渲染报错 -->
    <EventPreview 
      v-if="event" 
      :id="event.id" 
      :name="event.name" 
      :price="event.price" 
    />
  </div>
</template>

<script>
import EventPreview from '@/components/Event/EventPreview'

export default {
  components: { EventPreview },
  computed: {
    event() {
      // 从路由参数中提取id并转成数字
      const eventId = parseInt(this.$route.params.id)
      // 调用getter获取对应事件
      return this.$store.getters.getEventById(eventId)
    }
  }
}
</script>

这种方法的好处是：刷新页面不会丢失数据，复用了store中的状态，完全符合Vuex的设计理念。

方案二：用Nuxt的asyncData预获取数据（适合后端接口场景） #

如果以后你的事件数据是从后端接口获取的，这个方案会更适配。asyncData会在页面渲染前执行，提前获取数据并注入到页面的data中：

<template>
  <div class="event-id">
    <EventPreview :id="event.id" :name="event.name" :price="event.price" />
  </div>
</template>

<script>
import EventPreview from '@/components/Event/EventPreview'

export default {
  components: { EventPreview },
  asyncData({ store, params }) {
    const eventId = parseInt(params.id)
    const event = store.getters.getEventById(eventId)
    // 返回的对象会被合并到页面的data中
    return { event }
  }
}
</script>

方案三：路由跳转时直接传递对象（不推荐，刷新丢失） #

如果你只是临时需要传递对象，也可以通过nuxt-link的params传递，但刷新页面后数据会丢失（因为路由参数只能存储字符串，对象会被序列化，刷新后无法恢复），所以只适合非持久化的场景：

修改EventList组件的nuxt-link #

<template>
  <div class="event-list">
    <nuxt-link 
      v-for="event in events" 
      :key="event.id" 
      :to="{ 
        path: `/events/${event.id}`,
        params: { event: event }
      }"
    >
      <EventPreview :id="event.id" :name="event.name" :price="event.price" />
    </nuxt-link>
  </div>
</template>

在_id页面中接收对象 #

<template>
  <div class="event-id">
    <EventPreview 
      v-if="$route.params.event" 
      :id="$route.params.event.id" 
      :name="$route.params.event.name" 
      :price="$route.params.event.price" 
    />
  </div>
</template>

总结一下，方案一是最推荐的，既满足需求又符合Nuxt+Vuex的最佳实践，不用担心刷新页面丢失数据的问题。

内容的提问来源于stack exchange，提问作者Riza Khan