对计算属性使用vue-meta

Question

我正试着给我的文章页面添加动态的meta标签。文章存储在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)
  }
}

或者使用vuex中的mapState

import { mapState } from 'vuex'

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