Фильтровать массив по тегу Vuejs

Question

Я сейчас работаю с vuejs и vuex. Вот моя проблема:

У меня есть магазин со всеми данными

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

}

На главной странице я хочу отображать все виды статей. На странице учебника я хочу отображать только статьи с тегом "учебник" и т.д ...

Я использую vue-router. Я работаю с вычисляемым свойством и v-for, чтобы я мог зацикливаться в статьях.

computed: {
        articles() {
            if (this.$route.meta.title == 'Tutorial') {
                return this.$store.state.articles.tag == 'Tutorial'
            }
            if (this.$route.meta.title == 'Review') {
                return this.$store.state.articles.tag == 'Review'
            }
            else if (this.$route.meta.title == 'Home') {
                return this.$store.state.articles
            }
        }
    }

Я знаю, что return this.$store.state.articles.tag == 'Tutorial' не может работать, я ищу способ его правильно закодировать, но я застрял!

Кроме того, если у вас есть совершенно другой и лучший способ сделать это, не стесняйтесь сказать мне!

Спасибо, что уделили время:)

Answer 1

Как уже упоминалось, вам нужно использовать фильтр, но в качестве шаблона вы должны структурировать его с помощью vuex getters когда вы обращаетесь к свойствам из состояния vuex, не обращайтесь к ним напрямую, но правильно использовать getters

Vuex store e.x.

const store = new Vuex.Store({
  state: {
    articles: [
   {
    title: "Article 1",
    id: 1,
    tag: "Tutorial"
  }, 
  {
    title: "Article 2",
    id: 2,
    description: "Article 2",
    tag: "Review"
  }

 ]
},
getters: {
   allArticles: state => {
     return state.articles
   },
   tutorialArticles: state=>{
      return state.articles.filter(article=>articles.tag=='Tutorial')
   },
   reviewArticles: state=>{
    return state.articles.filter(articles=>articles.tag=='Review')
  }
}
 })
 //end of vuex store

Тогда в вашем компоненте "все статьи" вы используете

 computed:{
    articles(){
      return this.$store.getters.allArticles;
    }
 }

Тогда в вашем компоненте статей учебника вы используете

 computed:{
    articles(){
       return this.$store.getters.tutorialArticles;
    }
 }

Это очень важно, потому что если вам нужно изменить код для метода фильтра, вы делаете это в одном месте, и это цель использования Vuex

Answer 2

Вероятно, лучший способ - использовать .filter ()

var obj =  {state: {
    articles: [{
      title: "Article 1",
      id: 1,
      tag: "Tutorial"
    }, {
      title: "Article 2",
      id: 2,
      description: "Article 2",
      tag: "Review"
    }
   ]}}

var filtered = obj.state.articles.filter(o=>o.tag == "Tutorial");

console.log(filtered)