Vuex State и Vue-роутер - PullRequest
Новая
       8

Vuex State и Vue-роутер

0 голосов
/ 04 сентября 2018

Я пытаюсь сделать блог с 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>


Когда я нажимаю на сетку статьи, я хочу, чтобы она перенаправляла на компонент articlePage.vue с данными той же статьи id.

Пока что на моем компоненте articlePage.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 и получить доступ к нужным данным. Но это не работает. Что я делаю не так?

Спасибо за вашу помощь! :)

Ответы [ 3 ]

0 голосов
/ 04 сентября 2018

Вы должны использовать find вместо filter и добавить return в функцию обратного вызова find 

selectedArticle() {

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

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

  });

  return article;

}
0 голосов
/ 04 сентября 2018

Сначала определите ваши маршруты и посмотрите, как создать динамический маршрут: 

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

В вашем магазине Vue пройдите маршруты и vuex store : 

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

В свойстве getters в Vuex Store вам нужно создать метод, который фильтрует / находит статью по идентификатору, что-то вроде этого: 

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

И, наконец, в вашем методе mount () назовите его: 

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

this.articleId - это параметр, отправляемый по URL, не забудьте определить его в компонентах: 

export default {
  name: "articlePage",
  props: ["category"],
...}
0 голосов
/ 04 сентября 2018

Назовите ваши маршруты и передайте свой articleId , например: 

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

Кроме того, использование Array.prototype.find может быть лучшей идеей, чем использование Array.prototype.filter , потому что второе даст вам массив из одного элемента в вашем случае .

...