淺談mobx狀態管理

1.回憶redux

redux:   action,store,reducer        Component

action的觸發：通常經過手工去觸發，或經過組件去派發

store對象：store對象是經過redux的createStore建立的，拿到store對象後，作dispatch,去派發一個action

action包含兩個數據，一個是action的類型，一個是payload(載荷)

action一旦被派發，註冊在reducer中的store會自動運行

因此在建立store的時候，要搭一個reducer

reducer就是一個純函數，用來返回一個新的狀態

reducer須要返回什麼狀態須要action去告訴他

最後store要把action透明的給reducer,reducer返回一個新的state

還須要subscribe作一個訂閱，才知道這個狀態更新了

2.回憶vuex

vuex:   action,mutation,state     Component

經過組件去派發action,仍是經過dispatch

action有個類型，類型有兩種寫法，一種是寫個type,一種是經過函數的形式寫個參數，還有載荷

action中間要作一件事就是commit,只有commit後才能調用mutation的那些方法

commit的操做是須要人工完成的，能夠經過你的組件直接commit,也能夠在action裏面進行異步操做完了之後去commit

commit被觸發後就會調用mutation,mutation就會修改原有的state

vue的響應式設計，state修改後，會自動render組件（必須給每一個組件注入store）

3.mobx

4.@action @oservable  稱之爲裝飾器，裝飾器是爲了加強原有的類或方法的能力

5.安裝        yarn add mobx

啓動項目    yarn start

6.mobx細節

observable   可觀察的

數組

對象

ES6的map

variable

 

7.彈射

命令   yarn eject

yarn  add   @babel/plugin-proposal-decorators  --dev

yarn  add   @babel/preset-env  --dev

yarn add babel-plugin-transform-class-properties  --dev

8.(@)computed     既能夠當作裝飾器，又能夠當成方法使用

計算屬性做爲裝飾器的話，必須在前面加一個get

9.autorun

10.when

11.reaction

12.yarn add mobx-react