我正在尝试用vuejs制作一个博客，但我有点卡住了。 我所有的文章数据都在 Vuex 商店中，如下所示：
export const store = new Vuex.Store({
state: {
articles: [{
title: "Article 1",
id: 1,
content:"Article 1 content"
}, {
title: "Article 2",
id: 2,
content:"Article 2 content"
}
}]
}
我的主页上有一个文章网格：
<div class="item-article" v-for="article in articles">
<router-link :to="{path: '/article/'+article.id}"></router-link>
<div>{{ article.title }}</div>
</div>
当我点击网格文章时，我希望它重定向到具有相同 id 文章数据的 articlePage.vue 组件。
到目前为止，在我的文章Page.vue组件上，我使用了这个：
<div v-for="article in selectedArticle">
<h1>{{ article.title }}</h1>
<p>{{ article.content }}</p>
</div>
computed: {
selectedArticle(){
return this.$store.state.articles.filter(article => article.id == this.$route.params.id);
}
}
我想使用$route.params.id来捕获 VueX 中的匹配 id，并访问正确的数据。但它不起作用。我做错了什么？
感谢您的帮助！ :)
首先，定义您的路由并查看如何创建动态路由：
const routes = [
{
path: '/articles/:id',
name: 'articles',
component: articlePage,
props: true
}
]
在你的 Vue instace 中，传递路线和vuex 商店：
new Vue({
store,
router: routes,
el: '#app',
render: h => h(App)
})
在 Vuex 商店的 getters 属性中，您需要创建一个按 id 过滤/查找文章的方法，如下所示：
getArticlesById: (state) => (id) => state.articles.find(article => article.id === id)
最后，在你的mounted((方法中，调用他：
this.article = this.$store.getters.getArticlesById(this.articleId)
this.articleId是通过 URL 发送的参数，请记住在组件 props 中定义他：
export default {
name: "articlePage",
props: ["category"],
...}
命名你的路由并像这样传递你的articleId：
<router-link :to="{ name: 'article', params: { id: article.id }}">{{article.title}}</router-link>
此外，使用 Array.prototype.find 可能比使用 Array.prototype.filter 更好，因为第二个会在您的情况下为您提供一个单元素数组。
你应该使用 find 而不是 filter，并在 find 回调函数中添加return
selectedArticle() {
let article = this.$store.state.articles.find(article => {
return article.id == this.$route.params.id
});
return article;
}