Coming from a jQuery background, I recently ventured into the world of Vue. Eager to learn more, I embarked on a project to create a simple user search and view details app. However, I've hit a roadblock and can't seem to find my way forward.
https://i.sstatic.net/pFgAA.png
The layout consists of three components - Nav.vue, Search.vue, UserProfile.vue as shown in the image. UserProfile.vue is nested inside the router view. Utilizing Vuex store with states userId and username, along with defined mutations for state changes.
Upon user inputting a username in the Search component, the app fetches a list of users from an API on the left sidebar. Clicking on a search result triggers the commitment of userId state. Subsequently, attempting to retrieve data from the API using the userId and display the user profile on the UserProfile component within the 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
Accessing userId from state through a computed property.
UserProfile.vue (inside <router-view />)
-------------------------------------------
computed: {
userId () {
return this.$store.state.userId
}
}
Need assistance in fetching and displaying data based on the selected userId retrieved from Vuex store. Any guidance would be highly appreciated. Thanks!