vue.js - Vuex - Normalizr 无法按预期工作
问题描述
我正在创建一个简单的聊天应用程序。我有三个实体:房间、消息和用户。我有一个虚假的 API,它返回如下响应:
[{
id: 1,
name: 'room1',
avatar: 'some img url',
messages: [
{
id: 1,
text: 'some text',
user: {
id: 1,
username: 'Peter Peterson',
avatar: 'some img url'
}
]
}]
我的动作是这样的:
getAllRooms({ commit }) {
commit(GET_ALL_ROOMS_REQUEST);
return FakeApi.getAllRooms()
.then(
rooms => {
const { entities } = normalize(rooms, room);
console.log(entities);
commit(GET_ALL_ROOMS_SUCCESS, {
rooms: entities.rooms, byId: rooms.map(room => room.id)
});
commit(GET_ALL_MESSAGES_SUCCESS, { messages: entities.messages });
commit(GET_ALL_USERS_SUCCESS, { users: entities.users });
},
err => commit(GET_ALL_ROOMS_ERROR)
)
}
我的突变看起来像这样:
[GET_ALL_ROOMS_REQUEST](state) {
state.loading = true;
},
[GET_ALL_ROOMS_SUCCESS](state, payload) {
state.rooms = payload.rooms;
state.byId = payload.byId;
state.loading = false;
},
[GET_ALL_ROOMS_ERROR]() {
state.error = true;
state.loading = false;
}
我的组件调用这样的动作:
{
mounted() {
this.getAllRooms();
}
}
这些是我的架构定义:
const user = new schema.Entity('users');
const message = new schema.Entity('messages', {
user: user
});
const room = new schema.Entity('rooms', {
messages: [message]
})
当我在 FakeApi.getAllRooms() 之后检查 then 方法中的响应时,每个对象都包装在一些奇怪的 Observer 中,然后我将它传递给规范化,规范化返回一些奇怪的响应。
我究竟做错了什么?
解决方案
问题不在于 vuejs,而在于我制作 normalizr 模式的方式。因为我的响应是根数组,所以我应该有一个新的rooms
数组模式,如下所示:
const user = new schema.Entity('users');
const message = new schema.Entity('messages', {
user: user
});
const room = new schema.Entity('rooms', {
messages: [message]
});
const roomsSchema = [room];
然后像这样使用它:normalize(rooms, roomsSchema)
推荐阅读
- snowflake-cloud-data-platform - 雪花:在预定时间之外启动任务
- javascript - 如何在 Sinon.js 中测试控制器中使用的辅助函数
- c# - Cosmos DB 在 LINQ 中查询日期时间在使用 ToList() 时有效,但在 IQueryable 时无效
- arrays - 将数字终端输入读入数组并对数组进行排序 [Bash]
- node.js - Webpack 仍然包含一个明确排除的文件夹
- sql - 所有的sql条件
- python - 更新熊猫数据框单元格值
- r - 网页抓取没有 html 类的表格
- asp.net-mvc - ASP.NET MVC(对象引用未设置为对象的实例)
- bash - AWK 打印列取决于带有分隔符逗号的标题