Vuex store module state access in component

Question

I am new in this world of Vue and Vuex, but I want to know if you can help me with this problem that I have right know, and actually don't really know why. Note: I am using an api developed in laravel.

The scenario is this:

I have a common component that I have created which displays a list (data table) of users.

users/component/Users.vue

<template>
            ....
</template>

<script>
import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'

export default {
data () {
    return {
        items: [],
        user: {}
    }
},
methods: {
    ...mapActions({
        getUsers: 'users/getUsers'
    })
},
mounted () {

    ***this.user = {
        ...mapGetters({
            user: 'auth/user'
        })
    }

     this.user = {
         ...mapGetters({
             user: 'auth/user'
         })
     }
    var routeName = this.$route.name // users or admins
    this.getUsers(route, user)

    this.items = this.$store.state.users
 }
}
</script>

Right now my application will have three roles: regular users, administrator and super administrators.

A super administrator will have two modules for display users:

List of all regular users.
List of all administrators.

This two modules would be in different routes, which is why I reused the common component that displays a list of users.

So, I have in Vuex right now two modules, the first one is auth module that in its state file will contain the information of the user that is logged in: name, email, role. And the second module is users module that in its state will contain the list of users passed via api depending on the route I am entering and the user's role that this one has.

The users module has three actions, the first one is getRegularUsers(), getAdmins() and getUsers(routeName, role). The last action is invoked in users component that received the route (url the user is currently in) and the user's role.

The definition of getUsers() is:

users/store/actions.js

...
export const getUsers = (routeName, role) => {

if (routeName == 'admins') {
    if (role === 'SuperAdmin')
        this.getAdmins()
}
else
    this.getRegularUsers();

}
....

As you can see, this action is considering the route and the role of the current user that is logged in and depending on the route or role, this action invoked the other actions that I created. This two other actions fetch via commit (mutation) the users state, that is an array of user objects:

users/store/state.js

export default {
  users = []
}

The problem:

Looking at the chrome console, this is the error: The undefined or null error, means that this.user.role is udenfined

And If I look at vuex-devtools you will see that user has the role assigned, even in getters and state: User role - getter and state

The question:

I have done anything in actions, such as this.$store.getters.user.role and nothing happens.

So, hope you can help me with this. I think I have explained carefully the situation I am having.

Thanks for your support.

on a side note: if you are not confident in using Vuex just yet then why use it the advanced way? just Keep It Simple Stupid i.e. KISS in the beginning and once you know what's happening you can always extend it — Lahori

Lucien Albert Lucien Albert · Accepted Answer · 2018-06-11T11:57:30

Get the users of the role:

var routeName = this.$route.name // users or admins
this.getUsers(route, this.user.role)

set mapGetters in computed object:

computed: {
    ...mapGetters({
        user: 'auth/user'
    })
}

and use vuex getters for this line

this.items = this.$store.state.users

Vuex store module state access in component

1 Answers