Vuex 在组件中存储模块状态访问

Posted 2023-02-23

【中文标题】Vuex 在组件中存储模块状态访问

【英文标题】：Vuex store module state access in component

【发布时间】：2017-12-05 01:40:00

【问题描述】：

我是这个 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 模块，它的状态文件将包含登录用户的信息：姓名、电子邮件、角色。第二个模块是 users 模块，它的状态将包含通过 api 传递的用户列表，具体取决于我输入的路线和该用户的角色。

用户模块有三个动作，第一个是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 具有分配的角色，即使在 getter 和 state 中也是如此：User role - getter and state

问题：

我在操作中做了任何事情，例如 this.$store.getters.user.role，但没有任何反应。

所以，希望你能帮我解决这个问题。我想我已经仔细解释了我遇到的情况。

感谢您的支持。

【问题讨论】：

附带说明：如果您对使用 Vuex 还没有信心，那么为什么要使用高级方式呢？只是保持简单愚蠢，即在开始时接吻，一旦你知道发生了什么，你就可以随时扩展它

【参考方案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