MobX自動運行和內部構造

Question

反應做自動運行和反應必須是構造內才能工作？ 我可以寫這個簡單的例子嗎？構造函數？

此外，我在自動運行內運行的代碼正常運行，但如果將其更改爲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() 

export default store 

Answer 1

自動運行和反應不必是在構造。例如，你可以做到這一點，如果你喜歡：

例

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]}` 
    } 
    } 
} 

const store = new ExpensesStore() 

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

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

之所以console.log(`${this.expenses}`)作品和console.log(this.expenses)不會是因爲你當你寫this.expenses不取消引用您的淺陣列東西。

當你寫...

`${this.expenses}` 

...你是隱式調用this.expensestoString()。您可以使用toJS或slice得到不把它在一個字符串時相同的效果：

例（JSBin）

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]}` 
    } 
    } 
} 

const store = new ExpensesStore() 

autorun(() => { 
    // store.expenses.slice() works just as well 
    console.log(toJS(store.expenses)) 
}) 

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

setTimeout(() => { 
    store.addExpense(1000) 
}, 1000)