[Vuejs]-Fetching data with axios from a fake API into a Vuex store doesn't produce the desired outcome

by

0👍

They way you are committing is incorrect. The first argument is a string of the mutation name, the second one is the value.

Your commit in your store should look like that in your action:

commit('setPosts', response.data)

Note that I’ve renamed your mutation from getallpost to setPosts as this makes it semantically more accurate and avoids naming collisions, so basically:

  mutations:{
    setPosts(state, posts) {
      state.posts = posts
    }
  },

That should do the job of storing the data. Also, get rid of the var self = this. When using store you never want to use this, the current state of the store will always be given to your mutation through the parameter in the function, to ensure that everything runs synchronous without side-effects.

So far so good. Now in order to be able to receive the fetched posts from your store, you need a getter in your store module:

  getters: {
    getPosts: state => state.posts,
  },

Finally add the getter to your component’s methods:

...mapGetters({
  storePosts: 'getPosts'
})

You can now use the posts in your template by simply using {{ storePosts }}

Leave a comment