0

我在我的项目中遇到了一些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;    
 },

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

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

为什么会这样？

请帮我。我该如何解决这个问题？非常感谢您的参与。

4

1 回答 1

0

我认为 getterallUsers与 没有区别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 检查其数据流以检查问题

于 2020-12-24T06:02:55.090 回答