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

【问题标题】：I am trying to get data form my vuex store but it is giving an error我正在尝试从我的 vuex 存储中获取数据，但它给出了一个错误
【发布时间】：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 的元素上吗？

标签： javascript vue.js vuex vuejs3 website-deployment

【解决方案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 检查其数据流以检查问题

【讨论】：