我正试图从我的vuex商店获取数据，但它给出了一个错误

Question

我在项目中使用vuex getters时遇到了一些问题。我有一个显示所有用户的路由。当我访问该路由时，它显示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
}

这个计算的性质给出了"；CCD_ 2"；这个错误。

我有另一个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

为什么会发生这种情况？

请帮帮我。我该如何解决这个问题？非常感谢您抽出时间。

Answer 1

我认为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来检查其数据流，以检查问题