使用Vuex将数据绑定到组件

Question

我是vue.js的新手，我正在尝试使用vuex。这是我的问题：

我有一个与商店链接的文章列表（这是一个组件）与v-for="article in articles和计算属性：

computed: {
        articles() {
            return this.$store.state.articles
        }
    }

所以这是我店里的数据：

 state: {
    articles: [{
        title: "Article 1",
        id: 1,
        description: "Article 1",
      }, {
        title: "Article 2",
        id: 2,
        description: "Article 2",
      }
     }]
}

当我点击文章时，我希望它使用<router-link :to="{path: '/article/'+article.id}"></router-link>重定向到文章页面模板（这是一个组件）。

我要做的是绑定articlePage模板中正确文章的数据。

问题是，如果我使用articlePage.vue将相同的计算属性应用于我的v-for组件，我将在同一页面上显示所有文章。我想只显示匹配的id组件。

我怎样才能做到这一点？

感谢您的时间 ：）

Answer 1

从你的评论我明白你使用vue-router模块所以在你的routes.js（或结构）你必须有这样的东西

const router = new VueRouter({
   routes: [
    { path: '/articles', component: articlesPage },
    { path: '/article/:id', component: articlePage }
  ]
})    

然后在您的articlePage组件中，您可以像这样提取“：id”：

this.$route.params.id

因为vue-router可以让你访问带有方法和属性的对象$route在这里查看更多https://router.vuejs.org/guide/essentials/dynamic-matching.html

然后你可以用它来搜索文章数组并查找数据并将它们呈现给e.x.

computed:{
   selectedArticle(){
     var article_id = this.$route.params.id;
     var articles = this.$store.state.articles;
     var article = null;
     for(var a=0;a<articles.length;a++){
         if(articles[a].id == article_id ){
           article = articles[a];
           break;
         }
     } 
     return article;
   }
}