NUXT Передача данных в подпорки в динамической конечной точке c - PullRequest
Новая
       11

NUXT Передача данных в подпорки в динамической конечной точке c

0 голосов
/ 19 января 2020

это вопрос по NUXT и Vuex. Я хочу получить соответствующий элемент на моей динамической странице c (_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, он делает go странице _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>

1 Ответ

2 голосов
/ 19 января 2020

Вы можете создать хранилище vuex для хранения данных о событиях, а затем создать геттер для получения соответствующего события по идентификатору. 

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 и передать его в геттер 

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