一、微信小程式自身的應用狀態是怎樣定義的呢？

1. page({
2. data:{
3. item:'',
4. isLoading:true
5. },
6. onLoad:function(){
7. this.setData({
8. isLoading:false
9. })
10. }
11. })

二、為什麼使用應用狀態管理工具？

同一資料，一次請求，應用全域性共享。 
MVVM架構開發中清晰的資料流向——單向資料流。 
將分散在不同頁面的資料與應用狀態統一管理，共享資料與狀態變化。 
適應元件化、模組化開發的資料結構，提高程式碼重複使用率、提高開發效率。 
三、應用狀態管理工具有哪些？

前端MVVM架構基礎庫有很多，目前主流的有React、Vue、Angular，不同的庫有不同的應用狀態管理方案，比如React常用的Flux，Redux，Mobx，Vue的Vuex，Angular的ngrx/store，Redux並不是React的專屬，而是針對Redux有最優的解決方案，當然Redux同樣也能移植到其他框架使用，比如可以在微信小程式中使用。

四、微信小程式如何選擇應用狀態管理工具庫？

目前微信有移植的Redux與Mobx來作為應用狀態管理，Redux 和 Mobx 都是當下比較火熱的資料流模型，一個背靠函式式，似乎成為了開源界標配，一個基於面向物件，低調的前行。

函式式 vs 面向物件

函式式的優點：

將資料和處理邏輯分離，程式碼更加簡潔，模組化，可讀性好 
易測試、易維護，測試環境容易模擬 
邏輯程式碼可複用性強 
相對比面向物件的程式設計：

javascript的弱型別，表明它基於物件，不適合完全函式式表達。 
數學思維和資料處理適合用函式式，而業務邏輯的處理適合用面向物件。 
邏輯嚴謹的函數語言程式設計相當完美，但為了實現具體業務功能不得不寫更多細粒度程式碼來實現，而面向物件的方式更為簡潔和靈活。 
Redux vs Mobx

那麼具體到這兩種模型，又有一些特定的優缺點呈現出來。

先來看 Redux 的特點:

reducer

1. import{ combineReducers }from'redux'
2. import{ createReducer }from'redux-immutablejs'
3. import{ fromJS }from'immutable'
4. import{
5. EXAMPLE
6. }from'../constants'
7. const example = createReducer(fromJS({
8. title:"專案構建成功"
9. }),{
10. [EXAMPLE]:(state, action)=>{
11. return state
    .merge({
12. title: action.payload.title
13. })
14. }
15. })
16. const rootReducer = combineReducers({
17. example
18. })
19. exportdefault rootReducer

action

1. import{
2. EXAMPLE
3. }from'../constants'
4. function example(val){
5. return{
6. type: EXAMPLE,
7. payload:{
8. title: val
9. }
10. }
11. }
12. exportfunction changeTitle(val){
13. return(dispatch, getState)=>{
14. dispatch(example(val))
15. }
16. }

宣告式程式設計 reducer 
純函式 action 無副作用 
不可變資料 immutable 
對比Mobx：

1. var extendObservable =require('../libs/mobx').extendObservable;
2. var apiPath =require('../config/apiPath')
3. var{formatTime}=require('../utils/tool')
4. var app = getApp()
5. var userInfo =function(){
6. extendObservable(this,{
7. title:'我的預約',
8. data:{},
9. order:[]
10. })
11. this.receive =function(){
12. var that =this
13. app.getUserInfo(function(userInfo){
14. that.data = userInfo
15. })
16. }
17. this.getUserOrder =function(){
18. var that =this
19. wx.request({
20. url: apiPath.GETUSERORDER,
21. method:'GET',
22. header:{
23. 'Authorization':`Bearer ${wx.getStorageSync('token') || []}`,
24. 'Content-Type':'application/json'
25. },
26. success:function(json){
27. if(json.statusCode ==200){
28. that.order = json.data
29. }
30. },
31. fail:function(e){
32. console.log(e)
33. }
34. })
35. }
36. }

資料流流動不自然，只有用到的資料才會引發繫結，區域性精確更新，但免去了粒度控制煩惱。 
想要時間回溯能力需要自建回溯資料較複雜，因為資料只有一份引用。 
自始至終一份引用，不需要 immutable，也沒有複製物件的額外開銷。 
資料流動由函式呼叫一氣呵成，便於除錯。 
由於沒有 magic，所以沒有中介軟體機制，沒法通過 magic 加快工作效率（這裡 magic 是指 action 分發到 reducer 的過程）。 
完美支援 typescript。 
專案中如何選擇

兩者還有更本質的區別在於Redux將state與action互相獨立，因此一個action可以將資料分發到多個state上，多個state都屬於全域性唯一的store中；而Mobx中action屬於 
store定義的object物件，因此只能對自身的state進行資料處理。越複雜的專案Redux的優勢越明顯。

從目前經驗來看，建議前端資料流不太複雜的情況，使用 Mobx，因為更加清晰，實現同一業務的程式碼更少；如果前端資料流極度複雜，建議使用 Redux+immutable，通過中介軟體減緩巨大業務複雜度。另外，用Mobx的時候可以使用typescript來輔助。

五、在小程式中的使用Mobx

在小程式專案中由於小程式框架自身的特性，元件化使用較為複雜，因此不會將頁面切分成細粒度元件，因此使用Mobx對於小程式來說要更為靈活。

index.js

1. var observer =require('../../libs/observer').observer;
2. varToast=require('../../components/toast/index')
3. Page(observer(Object.assign({},Toast,{
4. props:{
5. userInfo:require('../../stores/userInfo').default
6. },
7. onLoad:function(){
8. this.props.userInfo.receive()
9. wx.setNavigationBarTitle({
10. title:'我的'
11. })
12. },
13. onShow:function(){
14. this.props.userInfo.getUserOrder()
15. }
16. })))

index.wxml

1. <importsrc="../../components/toast/index.wxml"/>
2. <templateis="zan-toast"data="{{ zanToast }}"></template>
3. <viewclass="container">
4. <viewclass="userinfo">
5. <imageclass="userinfo-avatar"src="{{props.userInfo.data.avatarUrl}}"background-size="cover"></image>
6. <textclass="userinfo-nickname">{{props.userInfo.data.nickName}}</text>
7. </view>
8. <viewclass="userorder">
9. <viewclass="userorder-title">{{props.userInfo.title}}</view>
10. <viewclass="userorder-list">
11. <viewclass="orderinfo"wx:key="{{index}}"wx:for-index="key"wx:for="{{props.userInfo.order}}">
12. <viewclass="orderinfo-date">發車時間：{{item.trainDate}}</view>
13. <viewclass="orderinfo-traininfo">車次資訊：{{item.trainCode+' '+item.startCity+'——'+item.endCity+' '+item.seatName}}</view>
14. <viewclass="orderinfo-date">預約時間：{{item.created}}</view>
15. </view>
16. </view>
17. </view>
18. </view>

六、參考文件