在使用 mobx 做出反应时存储值未定义

Question

我在 mobx/react 上的配置非常简单。我正在尝试为下面的笔记制作简单的商店

//modal class
class Note {
    @observable body;
    @observable date;
    @observable by;
    @observable starred;

    constructor(body, by) {
        this.body = body;
        this.date = date.now();
      this.by=by;
      this.starred=false;
    }
}


//controller class
class NoteList {
    @observable notes = [];
    @computed get StarredNote() {
        return this.notes.filter(note => note.starred).length;
    }
}


const note_store =  new NoteList();
export default note_store
console.log('here');
console.log(note_store);


note_store.notes.push(
    new Note("Note 1",'SB'),
    new Note("Note 2",'PS')
);

但是我得到了 note_store 值 undefined ，这里有什么问题吗？

我的.babelrc

{
  "presets" : ["es2015", "react"],
  "plugins": ["transform-class-properties","transform-decorators-legacy"]
}

Answer 1

我搞定了，这是由于插件的顺序

来自文档

注意：插件的顺序很重要！

如果您手动包含插件并使用 transform-class-properties，请确保 transform-decorators-legacy 位于 transform-class-properties 之前。

/// WRONG

"plugins": [
  "transform-class-properties",
  "transform-decorators-legacy"
]

// RIGHT

"plugins": [
  "transform-decorators-legacy",
  "transform-class-properties"
]

更多https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

在使用 mobx 做出反应时存储值未定义

Store values are undefined on react using mobx

store

ecmascript-5

reactjs

mobx

mobx-react