我正在尝试从我的 vuex 存储中获取数据，但它给出了一个错误

Posted 2023-02-23

【中文标题】我正在尝试从我的 vuex 存储中获取数据，但它给出了一个错误

【英文标题】：I am trying to get data form my vuex store but it is giving an error

【发布时间】：2021-04-02 15:57:37

【问题描述】：

我的项目中的 vuex getter 遇到了一些问题。我有一条显示所有用户的路线。当我访问该路线时，它会显示 AllUsers.vue 组件。

在这个组件中，我使用 UsersList.vue 组件，并且在其中我有 SingleUser.vue 组件来显示用户详细信息。

我有一个从后端 API 获取所有用户数据的操作。然后我提交突变来改变状态。我也在使用 vuex 模块。

VUEX 动作：

async setUsers(context) 
    const response = await axios.get(`/api/users`);
    context.commit('setUsers', response.data.data);

VUEX 突变：

setUsers(state, payload) 
   state.users = payload;
,

VUEX 吸气剂：

allUsers(state)         
     return state.users;    
 ,

我已经在 created() 生命周期钩子中的 App.vue 组件中分派了操作。

async created() 
   await this.$store.dispatch("user/setUsers");
,

现在，如果我尝试使用 getter 从 vuex 存储中获取数据，就会出现问题。

selectedOptions() 
  const selectedUser = this.$store.getters["user/allUsers"].find(
     (user) => 
          return user.username === this.currentUsername;
     );
 
  const selectedRole = selectedUser.roles.find(
     (role) => 
           return role.name === this.currentUserRole;
     
  );
 
  return selectedRole

这个计算属性给出了“Uncaught (in promise) TypeError: Cannot read property 'roles' of undefined”这个错误。

我有另一个返回单个用户对象的 getter。

singleUser(state) 
    return (username) => 
        const selectedUser = state.users.find((user) => 
                return user.username === username;
        );
        return selectedUser;
    ;
,

我正在使用计算属性来调用该 getter

singleUser() 
   return this.$store.getters["user/singleUser"]("john");
,

当我使用 singleUser 计算属性在模板中显示整个对象时，这里不会出现错误。浏览器会显示这个结果。

  "_id": "5fdf4d54c618942e280cf5d8", "name": "John","image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9Gc", "username":"john"  "__v": 0 

但是，当我尝试使用singleUser.name 在模板中显示用户名或任何属性时，浏览器再次出现错误。最初，它工作正常，但当我刷新页面时，我的应用程序崩溃了。

Uncaught (in promise) TypeError: Cannot read property 'name' of undefined

为什么会这样？

请帮助我。我该如何解决这个问题？非常感谢您的宝贵时间。

【问题讨论】：

j 应该是大写。 => this.$store.getters["user/singleUser"]("john")。应该是John

您可以尝试将v-if="singleUser" 放在使用singleUser.name 的元素上吗？

【参考方案1】：

我认为getter allUsers和state.users没有区别，你可以将其默认值设置为[]。

const selectedUser = this.$store.getters["user/allUsers"].find(
     (user) => 
          return user.username === this.currentUsername;
     ); // here this.currentUsername is undefined in vuex? so
    // Uncaught (in promise) TypeError: Cannot read property 'roles' of undefined

您可以使用 vue devtools 检查其数据流以检查问题