javascript - 我正在尝试从我的 vuex 存储中获取数据,但它给出了一个错误
问题描述
我在我的项目中遇到了一些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
为什么会这样?
请帮我。我该如何解决这个问题?非常感谢您的参与。
解决方案
我认为 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 检查其数据流以检查问题
推荐阅读
- bash - 如果标志值包含括号,则 getops $OPTARG 为空
- google-apps-script - 我需要从移动应用程序运行 google sheet 宏/脚本
- angular - 角路由器滚动,获取位置
- c# - 检查组合框是否为空 C#
- android - 将mockwebserver添加到android项目时的依赖冲突
- node.js - 单元测试 $in 在猫鼬单元测试中
- android - 从 Room 数据库中获取两个总和
- android - 带有自定义填充的 Recyclerview 分隔符
- android - 必须导出活动或包含意图过滤器错误
- javascript - 是否有可能将定义的函数作为参数传递 express.post()