Отображение данных из магазина Vuex в компоненте на основе маршрута

Question

У меня есть следующие данные в хранилище Vuex:

 state: {
    news: [
      { id: 1,  title: "placeholder", text: "Lorem ipsum doloret imes", date: "20-01-2020", type: "management" },
      { id: 2,  title: "Revenue", text: "Lorem ipsum doloret imes", date: "20-01-2020",  type: "management"  }]
}

Я хочу отобразить эти данные в компоненте на основе идентификатора, используемого в маршруте:

 {path: '/news/:id',
   component: () => import('../views/NewsDetail.vue'), 
   props: true
  }

В моем NewsDetail . vue компонент Я пытаюсь получить данные следующим образом:

<template>
 <p class="display-1 text--primary">{{display.type}}</p>
</template>

<script>
 data () {
    return {
      display: newsId
    }
  },
  created () {
    const newsId = this.$store.state.news.find((newsId) => { return newsId.id == this.$route.params.id})
  }
</script>

Но я получаю сообщение об ошибке, что newsId не определен и что он определен, но никогда не используется ... Как я могу отобразить данные из хранилище vuex на основе идентификатора маршрута (который должен совпадать с идентификатором записи в хранилище)?

Answer 1

'ошибка в том, что newsId не определен'

, поэтому вам нужны vuex getter

<script>
  import { mapGetters } from 'vuex'

  computed: {
  ...mapGetters([
    news
  ]),

  newsId() {
    return this.news.find((newsId) => { return newsId.id == this.$route.params.id})
  }
}

, это либо добавление newsId к объекту данных

<script>
   data () {
     return {
       newsId: '',
       display: newsId
     }
   },

  created () {
    this.newsId = this.$store.state.news.find((newsId) => { return newsId.id == 
    this.$route.params.id})
}
</script>

Answer 2

Ваша константа newsId определена в методе created() и существует только в этой области. Он удаляется, как только функция возвращается. Вот почему вы получаете сообщение об ошибке - потому что const не используется внутри функции, и он не доступен для использования где-либо еще.

Я предлагаю вам создать id опору в вашем NewsDetail компонент, который будет автоматически заполнен параметром ID. Затем используйте свойство computed для извлечения соответствующих данных из хранилища.