I am trying to get data form my vuex store but it is giving an error

Question

I am having some trouble with vuex getters in my project. I have a route that displays all users. When I visit that route it shows AllUsers.vue component.

Inside this component, I am using UsersList.vue component and inside that I have SingleUser.vue component to display user details.

I have an action that fetches all user data from backend API. Then I commit mutations to change the state. I am also using vuex modules.

VUEX action:

async setUsers(context) {
    const response = await axios.get(`/api/users`);
    context.commit('setUsers', response.data.data);
}

VUEX mutation:

setUsers(state, payload) {
   state.users = payload;
},

VUEX getter:

allUsers(state) {        
     return state.users;    
 },

I have dispatched the action in my App.vue component in created() lifecycle hook.

async created() {
   await this.$store.dispatch("user/setUsers");
},

Now if I try to get data from vuex store using getters, it gives the problem.

selectedOptions() {
  const selectedUser = this.$store.getters["user/allUsers"].find(
     (user) => {
          return user.username === this.currentUsername;
     });
 
  const selectedRole = selectedUser.roles.find(
     (role) => {
           return role.name === this.currentUserRole;
     }
  );
 
  return selectedRole
}

This computed property gives "Uncaught (in promise) TypeError: Cannot read property 'roles' of undefined" this error.

I have another getter that returns a single user object.

singleUser(state) {
    return (username) => {
        const selectedUser = state.users.find((user) => {
                return user.username === username;
        });
        return selectedUser;
    };
},

I am using a computed property to call that getter

singleUser() {
   return this.$store.getters["user/singleUser"]("john");
},

When I display the whole object in the template by using singleUser computed property then it gives no error here. The browser shows this result.

{  "_id": "5fdf4d54c618942e280cf5d8", "name": "John","image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9Gc", "username":"john"  "__v": 0 }

But when I try to display the User name or any property in the template with singleUser.name then the browser gives an error again. Initially, it works fine but when I refresh the page then my app crashes.

Uncaught (in promise) TypeError: Cannot read property 'name' of undefined

Why this is happening?

Please help me. How can I solve this issue? Thank you so much for your time.

Answer 1

I think getter allUsers has no difference with state.users, you could set its default value to [].

const selectedUser = this.$store.getters["user/allUsers"].find(
     (user) => {
          return user.username === this.currentUsername;
     }); // here this.currentUsername is undefined in vuex? so
    // Uncaught (in promise) TypeError: Cannot read property 'roles' of undefined

you can use vue devtools to inspect its data flow to check the issue