使用带有计算属性的 vue-meta

Question

我正在尝试将动态元标记添加到我的文章页面。文章存储在 VueX 存储中，我使用计算属性来获取要显示的文章：

computed: {
  article() {
   return this.$store.state.articles.filter(article => article.id == this.$route.params.id);
  }
}

我为此使用 vue-meta（有更好的方法吗？我没有使用 Nuxt，所以我没有服务器端渲染）。

正确的使用方法是：

metaInfo() {
  return {
    title: this.article.title,

    meta: [
     {property: 'og:title', content: this.article.title},
     {property: 'og:site_name', content: 'Website Name'},
     {property: 'og:type', content: 'website'},
     {property: 'og:url', content: 'url.com'},
     {property: 'og:image', content: this.article.image},
     {property: 'og:description', content: this.article.description},
     ]
   }
 }

但只有当文章存储在data() 时才有效。既然组件返回的是动态文章，那么如何在计算属性中访问过滤后的文章呢？

谢谢你的帮助

Answer 1

你需要将你的计算属性命名为article，还要感谢@ssc-hrep2 使用find 而不是filter 在数组中返回匹配的对象，因为filter 返回一个数组：

computed: {
  article () {
    return this.$store.state.articles.find(article => article.id == this.$route.params.id)
  }
}

或者使用mapState from vuex:

import { mapState } from 'vuex'

computed: mapState({
  article: state => state.articles.find(article => article.id == this.$route.params.id)
})