标签: mobx

自动运行和反应必须在构造函数内部才能工作吗？我可以在没有构造函数的情况下编写这个简单的示例吗？

另外，我在自动运行中的代码可以正常运行，但如果我将其更改为console.log(this.expenses)它就不起作用。这是为什么？

import { observable, action, computed, useStrict, autorun, reaction } from 'mobx'
useStrict(true)

class ExpensesStore {

  @observable.shallow expenses = []

  @action addExpense = (expense) => {
   this.expenses.push(expense)
  }

  @computed get getExpense() {
    if(this.expenses.length > 0) {
      return `This is computed from ${this.expenses[0] + this.expenses[1]}`
    }

  }


  constructor() {
    autorun(() => {
      console.log(`${this.expenses}`)
    })

    reaction(
      ()=>this.expenses.map(expense => expense), expense => console.log(expense)
    )
  }


}

const store = window.store= new ExpensesStore() …

我收到错误：测试套件运行失败：意外的令牌 (5:0)

3 | import Locale from '../stores/view/language'
4 |
5 | @observer
  | ^
6 | export default class DateFormat extends Component {
7 |   constructor(props) {
8 |     super(props)

我使用 Webpack + Babel + Jest + Enzyme + React + Mobx

这是我的一些 package.json

{
  "scripts": {
    "test": "jest",
  },
  "devDependencies": {
    "babel-eslint": "8.0.1",
    "babel-jest": "21.2.0",
    "enzyme": "3.1.0",
    "enzyme-adapter-react-16": "1.0.2",
    "jest": "21.2.1",
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ],
    "env": {
      "test": {
        "presets": [
          "env",
          "react"
        ] …

我喜欢 MobX。我想在原生 JavaScript 中使用它。我尝试添加 CDN https://cdnjs.com/libraries/mobx 然后我尝试使用 MobX 语法编写一个类：

class MyStore {
  @observable data = 'foo'
}
const myStore = new MyStore();

但我收到错误：

SyntaxError: illegal character

对于@和 ：

ReferenceError: exports is not defined

从内部mobx.js文件。

所以如果没有 React 和 Blunding/Transpiler，这似乎是不可能的，是吗？如果没有，还有其他选择吗？

谢谢你！

我正在编写一个电子应用程序，并将所有应用程序数据保存在一个 MST 树中。现在我注意到，时不时地您会遇到数据变得不一致的情况（缺少引用对象等）。虽然任何类型的数据库都可能发生这种情况，但我发现 MST 存在一个特殊问题：

由于我们有一棵树在应用程序启动时被反序列化，然后用作单个快照，因此单个不一致将导致整个应用程序失败。我的应用程序将无法获得任何数据。

关于如何处理这个问题有任何提示吗？

更多信息

目前，每次树发生变化时（onSnapshot），我都会创建一个快照并将其保存在 localStorage 中。因此，错误用例是：创建 mst 对象 -> 在树的其他部分创建引用 -> 删除 mst 对象 -> 触发 onSnapshot -> 损坏的树被持久化。重新加载应用程序不会有帮助，因为树持续处于损坏状态。

我定义了一个从数组中删除项目的操作：

export default class myStore {

  @observable items = [];
  ...
  ...

  @action deleteItem = async (target) => {
    try {
      await backendService.deleteItem(target.id);
      runInAction(() => {
        const targetIndex = this.items.indexOf(target);
        this.items.splice(targetIndex, 1);
      });
    } catch (error) {
      ...
    }
  };

  ...
  ...
}

尽管我将组件设置为observer，但它仍然不会更新我的列表，直到我触发一些其他操作（单击、重命名等），在这种情况下，我将能够看到该项目已被删除。

我错过了什么吗？

我查看了 mobx-state-tree 文档，甚至测试文件https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/tests/core/reference- custom.test.ts#L148 找出如何从异步源填充引用节点。例如，加载了 user1 并引用了 user2，但 user2 不在树中，因此去获取 user2 并加载它。过去我让所有用户都提前加载，所以 types.late() 工作得很好。但我已停止在加载时间开始时加载所有用户，而是只想加载正在引用的用户数据。

export const User = types
      .model("User", {
        id: types.identifier,
        name: types.string,
        friends: types.array(types.late(types.reference(User)))
      })
      .preProcessSnapshot(snapshot => {
        if (snapshot){
            return({
              id: snapshot.id,
              name: snapshot.name,
              friends: snapshot.friends
            })
        }
      })

    export const UserStore = types
      .model("UserStore", {
        users: types.map(User),
      })
      .actions( self => ({
        fetchUser: flow(function* (userId) {
          let returnThis
          try {
            returnThis = yield ajaxFetchUser(userId) 
            self.users.put(returnThis)
          } catch …