Question

我是Vue和Vuex这个世界的新人，但我想知道你是否可以帮我解决这个我知道的问题，实际上并不知道为什么。 注意：我正在使用laravel开发的api 。

情况如下：

我创建了一个公共组件，它显示了用户的列表（数据表）。

用户/组件/ 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>

现在我的应用程序将有三个角色：普通用户，管理员和超级管理员。

超级管理员将为显示用户提供两个模块：

所有普通用户的列表。
所有管理员列表。

这两个模块将位于不同的路由中，这就是我重用显示用户列表的公共组件的原因。

所以，我现在在Vuex中有两个模块，第一个是 auth模块，在其状态文件中将包含登录用户的信息：name，email，作用即可。第二个模块是用户模块，其状态将包含通过api传递的用户列表，具体取决于我输入的路由以及该用户的用户角色。

用户模块有三个操作，第一个是 getRegularUsers（）， getAdmins（）和 getUsers（routeName，角色）即可。在收到路径的用户组件（用户当前所在的URL）和用户角色中调用最后一个操作。

getUsers（）的定义是：

用户/存储/ actions.js

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

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

}
....

如您所见，此操作正在考虑登录的当前用户的路由和角色，并且根据路由或角色，此操作会调用我创建的其他操作。这两个其他操作通过提交（突变）用户状态获取，这是一个用户对象数组：

用户/存储/ state.js

export default {
  users = []
}

问题：

查看chrome控制台，这是错误： The undefined or null error, means that this.user.role is udenfined

如果我查看vuex-devtools，您会看到用户已分配角色，即使在getter和state中也是如此：User role - getter and state

问题：

我已经在行动中做了一些事情，比如这个。$ store.getters.user.role ，没有任何反应。

所以，希望你能帮助我。我想我已经仔细解释过我的情况。

感谢您的支持。

Answer 1

获取角色的用户：

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

在计算对象中设置mapGetters：

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

并为此行使用vuex getter

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

组件

1 个答案: