根据路由在组件中显示来自 Vuex 存储的数据答案

【问题标题】：Displaying data from Vuex store in component based on route根据路由在组件中显示来自 Vuex 存储的数据
【发布时间】：2020-05-23 11:02:27
【问题描述】：

我在 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"  }]
}

我想根据路由中使用的id在组件中显示这些数据：

 {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 未定义，它已定义但从未使用过... 如何根据路由 id 显示来自 vuex 存储的数据（应该与存储中条目的 id 匹配）？

【问题讨论】：

不确定他们会如何提供帮助
如果您在 created 生命周期中将 const newsId 更改为 this.display，它将被修复
谢谢这个工作，它看起来很简单，让我觉得这是否是正确的方法？其他人建议使用 getter 或使用计算属性，这需要更多工作。
是的，您应该使用带计算的 getter，这将是更好的方法...如果 news 在存储中被另一个组件或其他东西更改，您的数据将不会更新.我也更喜欢使用吸气剂
是的，您可以从这里阅读有关生命周期及其工作原理的更多信息：alligator.io/vuejs/component-lifecycle

标签： vue.js vuejs2 vue-component vuex vue-router

【解决方案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>

【讨论】：

那么对于第二种方法我也可以直接设置 this.display 而不在数据中声明它？
在第一种方法中，我可以简单地使用 mapState 而不是 mapGetters 吗？
' 我也可以直接设置 this.display 而无需在数据中声明' - 不，我不这么认为，但你可以尝试'mapState 而不是 mapGetters' - 当然，但你应该使用 mapGetters , 如果要更改状态，请使用 mapActions 或安装 vuex-map-fields 包

【解决方案2】：

您的newsId 常量在created() 方法中定义，并且仅存在于该范围内。一旦函数返回，它就会被删除。这就是您收到错误消息的原因——因为 const 没有在函数内部使用，也不能在其他任何地方使用。

我建议您在 NewsDetail 组件中创建一个 id 属性，该属性将自动填充 ID 参数。然后使用computed 属性从存储中获取适当的数据。

【讨论】：

是的。在您的路由配置中，您有props: true，这意味着路由参数会自动绑定到同名的道具。使用 props 而不是在组件中显式引用路由参数可以将组件与路由解耦并使其更易于测试。