Vue.js Vuex-normalizer不'；I don’我没有按预期工作

我正在创建一个简单的聊天应用程序。我有三个实体：房间、消息和用户。 我有一个假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'
      }
  ]
 }]

[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();
  }
}

我的行动是这样的：

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)
    )
}

我的基因突变是这样的：

[{
  id: 1,
  name: 'room1',
  avatar: 'some img url',
  messages: [
      {
        id: 1,
        text: 'some text',
        user: {
          id: 1,
          username: 'Peter Peterson',
          avatar: 'some img url'
      }
  ]
 }]

[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();
  }
}

我的组件调用如下操作：

[{
  id: 1,
  name: 'room1',
  avatar: 'some img url',
  messages: [
      {
        id: 1,
        text: 'some text',
        user: {
          id: 1,
          username: 'Peter Peterson',
          avatar: 'some img url'
      }
  ]
 }]

[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方法中的响应时，每个对象都被包装在一个奇怪的观察者中，我这样传递它以进行规范化，规范化返回一些奇怪的响应

---

我做错了什么？

问题不在于vuejs，而在于我制作规范化模式的方式。因为我的响应是根数组，所以我应该有一个新的

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，roomschema）