Vue.js - Fetch Data from API and reload component on Vuex state change

Question

I come from jQuery background and just recently started using Vue. I'm trying to learn as much as I can and I'm trying to develop a simple user search and view details app however I am getting stuck and can't seem to find a way out to proceed forward.

I've a layout of three components - Nav.vue, Search.vue, UserProfile.vue as in the picture. UserProfile.vue is inside router view. I'm using Vuex store with states userId and username and I've defined mutations to commit the state changes.

When user searches by providing username in Search component I'm fetching users list from API on left sidebar. When user clicks on one of the search result I'm committing userId state and looking to fetch from API and display the user profile on the UserProfile component using the userId retrieved from Vuex store. The UserProfile component is inside router view.

Vuex store.js:

export default new Vuex.Store({

state: {
    userId:"",
    username: ""
}

mutations: {

  setUserId (state, payload) {
    state.userId = payload
  },

  setUsername (state, payload) {
    state.user.username = payload
  },
}

});

On Search.vue

Search.vue (outside  <router-view />)
-------------------------------------
<a href="#" @click="viewProfile" class="btn btn-info" >View Profile</a>

methods: {

    viewProfile() {
        this.$store.commit("setUserId", this.userId);
        this.$store.commit("setUsername", this.username);
    }
}

On UserProfile.vue

I'm getting userId from state from a computed property.

UserProfile.vue (inside  <router-view />)
-------------------------------------------

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

Now I want to fetch data from API and display the data in UserProfile component based on the selected userId which I'm retrieving from Vuex store but I'm stuck. Any pointer would be helpful. Thanks in advance.

Answer 1

Your store should contain state, getters, mutations and actions. Getters are used to retrieve the state. Mutations are used to updated the state. (mutations should be used only from actions) Actions are used to commit mutations.

Also in actions you can fetch data from your Api. To use actions you can use the syntax: $store.dispach("action-name",payload) the payload is optional.

For more documentation regarding vuex please visit : https://vuex.vuejs.org/guide/actions.html#composing-actions

Answer 2

Here is what I would do.

in viewProfile method, after mutating userId and username , I would fetch data from API. Actually, I use Vuex action and setUserId , setUsername mutations would be inside Vuex action. Parameters to API call will be userId and we need to save response(profile data) which can be in Vuex or in the component.

I say we don't need to change url when we select a user from searched users' results. UserProfile component would just render response data.

If we are supposed to go to other pages like localhost://users/:id , then we have to use a mounted hook. mounted hook is where we have to call fetch function to get profile data based on router parameter id .