vue.js - Vuex 在组件中存储模块状态访问

Question

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

场景是这样的:

我创建了一个公共(public)组件，它显示用户列表(数据表)。

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>

现在我的应用程序将具有三个角色:普通用户、管理员和 super 管理员。

一个 super 管理员会有两个显示用户的模块:

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

这两个模块会在不同的路由中，这就是为什么我重用了显示用户列表的公共(public)组件。

所以，我现在在 Vuex 中有两个模块，第一个是 auth 模块，在它的状态文件中将包含登录用户的信息:姓名、电子邮件、角色。第二个模块是用户模块，在其状态下将包含通过 api 传递的用户列表，具体取决于我输入的路由和该用户的角色。

users模块有3个 Action ，第一个是getRegularUsers()、getAdmins()和getUsers(routeName,角色)。最后一个操作在接收路由(用户当前所在的 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 = []
}

问题:

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

如果我查看 vuex-devtools，你会看到 user 已分配角色，即使在 getters 和状态中也是如此:User role - getter and state

问题:

我在 action 中做了任何事情，比如 this.$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 getters

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