Question

我正在尝试使用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组件。

到目前为止，在我的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中的匹配ID，并访问正确的数据。但这不起作用。我在做什么错了？

感谢您的帮助！：）

Answer 1

Name your routes并像这样传递您的 articleId ：

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

此外，使用Array.prototype.find可能比使用Array.prototype.filter更好，因为在您的情况下，第二个将为您提供一个单元素数组。

Answer 2

您应该使用find而不是filter，并在find回调函数中添加return

selectedArticle() {

  let article = this.$store.state.articles.find(article => {

    return article.id == this.$route.params.id

  });

  return article;

}

Answer 3

首先，定义您的路线并查看如何创建动态路线：

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商店的getters属性中，您需要创建一个通过id过滤/查找文章的方法，如下所示：

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"],
...}

Vuex状态和Vue路由器

3 个答案: