Vuex - Normalizr 没有按预期工作
Vuex - Normalizr doesn't work as expected
我正在创建一个简单的聊天应用程序。我有三个实体:房间、消息和用户。
我有一个假的 API returns 这样的响应:
[{
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 方法中的响应时,每个对象都包裹在一些奇怪的观察者中,我像那样传递它以规范化和规范化 returns 一些奇怪的响应。
我做错了什么?
问题不在于 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)
我正在创建一个简单的聊天应用程序。我有三个实体:房间、消息和用户。 我有一个假的 API returns 这样的响应:
[{
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 方法中的响应时,每个对象都包裹在一些奇怪的观察者中,我像那样传递它以规范化和规范化 returns 一些奇怪的响应。
我做错了什么?
问题不在于 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)