我正在创建一个简单的聊天应用 . 我有三个实体:房间,消息和用户 . 我有一个伪造的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中,并且我将它传递给它以进行规范化和规范化返回一些奇怪的响应 .
我究竟做错了什么?
1 回答
问题不在于vuejs,而在于我制作normalizr模式的方式 . 因为我的响应是根目录下的数组,所以应该有一个新的
rooms
数组模式,如下所示:然后像这样使用它:
normalize(rooms, roomsSchema)