update seperate component based on select value

Question

I have a blogs page that has includes two different components filter and card

Inside of my filterComponent I have a select dropdown filled by categories coming from the database, when I select on of these categories a graphql query fires that fetches new blog posts filted by category_id

But how do I update the card component with the new data I received from my filter component? is it possible to just pass the blogPostByCategoryId result back into the card component somehow ?

EDIT:

I managed to get some pieces working, I currently have a index.js file inside of my store directory of nuxt this file contains the following code:

import blogsGQL from '~/graphql/blog/blog.graphql'

export const state = () => ({
  blogs: []
})


export const actions = {
  async nuxtServerInit({ commit }, context) {
    const client = context.app.apolloProvider.defaultClient

    const response = await client.query({ query: blogsGQL })

    commit('setBlogs', response.data.blogs)
  }
}

export const mutations = {
  setBlogs(state, blogs) {
    state.blogs.push(blogs)
  },

  filter(state, categoryId) {
    state.blogs.map(blog => blog.category_id === categoryId)
  }
}

I query my graphql api and put all posts inside of my state, then in my parent component I pass down the data to my card component like so:

      


  computed: {
    blogs() {
      return this.$store.state.blogs
    }
  },

Now, I'm not sure if I'm having a brainfart but when trying to loop over the array inside of my card component like this:


All I get is blank space? I console logged the blogs array and the data is inside of it.
EDIT 2 :
So I fixed my previous problem, had to use state.blogs.push(...blogs) to get it working.
I also changed my file a bit after reading some docs I now use a getter to get the filterblogs :
export const getters = {
  filterdBlogs: state => (categoryId) => {
    return state.blogs.filter(blog => blog.category_id === categoryId)
  }
}

I call this method on the apollo update method inside of my filterComponent :
      update(data) {
        const id = data.blogByCategoryId[0].category_id

        this.$store.getters.filterdBlogs(id)
      }

This seems to work, console logging the filterdblogs method returns correct items but my card component is not being updated.
EDIT 3
so I changed the card component instead of passing it through props I do this now
// card component



Now when I select a value on my dropdown menu the state is not being updated;
// dropdown component






my filter method looks like this :
export const mutations = {
  filter(state, payload) {
    return state.blogs.filter(blog => blog.category_id === payload.categoryId)
  }
}

user_9294837 · Answer

You do mistake when mutate Vuex state. Correct format of mutation:

export const state = () => ({
     blogs: [],
     search: null //if you want multiselect you must use array [] with ids
})

export const getters = {
  filterBlog(state, payload) {
    return state.search ? state.blogs.filter(blog => +blog.category_id === +state.search) : state.blogs
  }
}

export const mutations = {
  setBlogs(state, blogs) {
    state.blogs.push(blogs)
  },
  search(state, id) {
     state.search = id
  }
}

Card component:

 

  computed: {
    blogs() {
      return this.$store.getters.filterBlog
    }
  }

Dropdown component:

update(data) {
     const id = data.blogByCategoryId[0].category_id

     this.$store.commit('search', id)
 }

In Vuex, you change the current state directly, rather than returning a new one like in Redux Reducer.

update seperate component based on select value

1 Answers