Vuex-Normalizr无法正常工作

时间:2018-08-31 17:12:32

标签: vue.js vuex normalizr

我正在创建一个简单的聊天应用程序。我有三个实体:房间,消息和用户。 我有一个伪造的API,它返回的响应是这样的:

log4j:ERROR Could not read configuration file from URL [file:./bin/../config/log4j.properties].
java.io.FileNotFoundException: ./bin/../config/log4j.properties (No such file or directory)
    at java.io.FileInputStream.open(Native Method)
    at java.io.FileInputStream.<init>(FileInputStream.java:146)
    at java.io.FileInputStream.<init>(FileInputStream.java:101)
    at sun.net.www.protocol.file.FileURLConnection.connect(FileURLConnection.java:90)
    at sun.net.www.protocol.file.FileURLConnection.getInputStream(FileURLConnection.java:188)
    at org.apache.log4j.PropertyConfigurator.doConfigure(PropertyConfigurator.java:557)
    at org.apache.log4j.helpers.OptionConverter.selectAndConfigure(OptionConverter.java:526)
    at org.apache.log4j.LogManager.<clinit>(LogManager.java:127)
    at org.slf4j.impl.Log4jLoggerFactory.<init>(Log4jLoggerFactory.java:66)
    at org.slf4j.impl.StaticLoggerBinder.<init>(StaticLoggerBinder.java:72)
    at org.slf4j.impl.StaticLoggerBinder.<clinit>(StaticLoggerBinder.java:45)
    at org.slf4j.LoggerFactory.bind(LoggerFactory.java:150)
    at org.slf4j.LoggerFactory.performInitialization(LoggerFactory.java:124)
    at org.slf4j.LoggerFactory.getILoggerFactory(LoggerFactory.java:412)
    at org.slf4j.LoggerFactory.getLogger(LoggerFactory.java:357)
    at org.slf4j.LoggerFactory.getLogger(LoggerFactory.java:383)
    at org.apache.zookeeper.server.quorum.QuorumPeerMain.<clinit>(QuorumPeerMain.java:64)
log4j:ERROR Ignoring configuration file [file:./bin/../config/log4j.properties].
log4j:WARN No appenders could be found for logger (org.apache.zookeeper.server.quorum.QuorumPeerConfig).
log4j:WARN Please initialize the log4j system properly.
log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for more info.

我的动作如下:

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

当我在FakeApi.getAllRooms()之后的then方法中检查响应时,每个对象都包裹在某个怪异的Observer中,并且像这样通过它进行归一化和归一化返回一些怪异的响应。

我在做什么错了?

1 个答案:

答案 0 :(得分:0)

问题不在于vuejs,而是我制作normalizr模式的方式。因为我的响应是从根开始的数组,所以我应该有一个新的const series_0 = [{ 'value': 3000, 'name': '2016-09-20T20:23:48.426Z' }, { 'value': 6000, 'name': '2016-09-21T08:58:04.100Z' }, { 'value': 4000, 'name': '2016-09-21T05:21:08.317Z' }, { 'value': 6000, 'name': '2016-09-19T11:26:36.302Z' }, { 'value': 5000, 'name': '2016-09-16T11:26:19.165Z' }] const series_1 = [{ 'value': 3000, 'name': '2016-09-20T20:23:48.426Z' }, { 'value': 1500, 'name': '2016-09-21T08:58:04.100Z' }, { 'value': 8000, 'name': '2016-09-19T11:26:36.302Z' }, ] //make sure the longer array is the outer for-loop-variable const s0 = series_0.length >= series_1.length ? series_0 : series_1; const s1 = series_0.length >= series_1.length ? series_1 : series_0; let res = []; for (const s of s0) { let resObj = {name: s.name, value: s.value}; for (const t of s1) { if (s.name === t.name) { resObj.value+=t.value } } res.push(resObj); } console.log(res);数组架构,如下所示:

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];