Vuex 상태 및 vue-router

Vuex 상태 및 vue-router

vuejs로 블로그를 만들려고 하는데 좀 막히네요.모든 기사 데이터는 다음과 같은 Vuex Store에 있습니다.

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>

그리드 기사를 클릭하면 기사 페이지로 리다이렉트됩니다.vue 컴포넌트에 동일한 ID 아티클의 데이터를 포함합니다.

지금까지 제 기사 페이지입니다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.idVueX에서 일치하는 ID를 포착하고 올바른 데이터에 액세스하기 위해 사용합니다.근데 안 되네.내가 뭘 잘못하고 있지?

잘 부탁드립니다. :)

먼저 루트를 정의하고 다이내믹루트를 작성하는 방법을 확인합니다.

const routes = [
  {
    path: '/articles/:id',
    name: 'articles',
    component: articlePage,
    props: true
  }
]

Vue 인스턴스에서 경로 및 vuex 스토어:

new Vue({
  store,
  router: routes,
  el: '#app',
  render: h => h(App)
})

Vuex Store의 getters 속성에서 다음과 같은 ID로 기사를 필터링/검색하는 메서드를 만들어야 합니다.

getArticlesById: (state) => (id) => state.articles.find(article => article.id === id)

마지막으로 mounted() 메서드로 호출합니다.

this.article = this.$store.getters.getArticlesById(this.articleId)

this.articleId는 URL에 의해 전송되는 파라미터입니다.이 파라미터는 컴포넌트 소품에서 정의합니다.

export default {
  name: "articlePage",
  props: ["category"],
...}

경로 이름을 지정하고 다음과 같이 articleId를 전달합니다.

<router-link :to="{ name: 'article', params: { id: article.id }}">{{article.title}}</router-link>

또한 Array.protype을 사용합니다.Array.protype을 사용하는 것보다 find를 사용하는 것이 더 나을 수 있습니다.두 번째 필터는 1소켓 어레이를 제공하기 때문입니다.

필터 대신 find를 사용하여return검색 콜백 함수 내에서

selectedArticle() {

  let article = this.$store.state.articles.find(article => {

    return article.id == this.$route.params.id

  });

  return article;

}

언급URL : https://stackoverflow.com/questions/52169797/vuex-state-and-vue-router