Vuex를 사용하여 컴포넌트에 데이터 바인딩

Vuex를 사용하여 컴포넌트에 데이터 바인딩

처음입니다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 구성 요소만 표시하고 싶습니다.

내가 어떻게 그럴 수 있을까?

시간 내주셔서 감사합니다:)

당신의 코멘트를 통해 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-module을 통해 객체에 액세스할 수 있기 때문입니다.$route메서드 및 속성 자세한 내용은 여기를 참조하십시오.

그런 다음 이를 사용하여 기사 배열을 검색하고 데이터를 검색하여 표시할 수 있습니다.

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;
   }
}    

언급URL : https://stackoverflow.com/questions/52150408/bind-data-to-component-with-vuex