我是Vue和Vuex这个世界的新手，但是我想知道你是否可以帮我解决这个我知道的问题，实际上并不知道为什么 . Note: I am using an api developed in laravel .
The scenario is this:
我有一个我创建的公共组件，它显示用户的列表（数据表） .
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>
现在我的应用程序将有三个角色：常规用户，管理员和超级管理员 .
超级管理员将为显示用户提供两个模块：
-
所有常规用户的列表 .
-
所有管理员列表 .
这两个模块将位于不同的路由中，这就是我重用显示用户列表的公共组件的原因 .
所以，我现在在Vuex中有两个模块，第一个是 auth module ，在其状态文件中将包含登录用户的信息：name，email， role . 第二个模块是 users module ，它的状态将包含通过api传递的用户列表，具体取决于我输入的路由和用户的角色 .
users module 有三个动作，第一个是 getRegularUsers() ， getAdmins() 和 getUsers(routeName, role) . 在接收路由的用户组件（用户当前所在的URL）和用户角色中调用最后一个操作 .
getUsers() 的定义是：
users / store / actions.js
...
export const getUsers = (routeName, role) => {
if (routeName == 'admins') {
if (role === 'SuperAdmin')
this.getAdmins()
}
else
this.getRegularUsers();
}
....
如您所见，此操作正在考虑登录的当前用户的路由和角色，并且根据路由或角色，此操作会调用我创建的其他操作 . 这两个其他操作通过提交（突变） users 状态获取，这是一个用户对象数组：
users / store / state.js
export default {
users = []
}
The problem:
查看chrome控制台，这是错误：The undefined or null error, means that this.user.role is udenfined
如果我查看vuex-devtools，您会看到 user 已分配角色，即使在getter和state中也是如此：User role - getter and state
The question:
我已经在行动中做了任何事情，例如 this.$store.getters.user.role 并且没有任何反应 .
所以，希望你能帮助我 . 我想我已经仔细解释过我的情况 .
感谢您的支持 .
1 回答
获取角色的用户：
在计算对象中设置
mapGetters：并为此行使用vuex getters