一、微信小程序自身的應(yīng)用狀態(tài)是怎樣定義的呢？

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

二、為什么使用應(yīng)用狀態(tài)管理工具？

同一數(shù)據(jù)，一次請(qǐng)求，應(yīng)用全局共享。  MVVM架構(gòu)開(kāi)發(fā)中清晰的數(shù)據(jù)流向——單向數(shù)據(jù)流。  將分散在不同頁(yè)面的數(shù)據(jù)與應(yīng)用狀態(tài)統(tǒng)一管理，共享數(shù)據(jù)與狀態(tài)變化。  適應(yīng)組件化、模塊化開(kāi)發(fā)的數(shù)據(jù)結(jié)構(gòu)，提高代碼重復(fù)使用率、提高開(kāi)發(fā)效率。  三、應(yīng)用狀態(tài)管理工具有哪些？

前端MVVM架構(gòu)基礎(chǔ)庫(kù)有很多，目前主流的有React、Vue、Angular，不同的庫(kù)有不同的應(yīng)用狀態(tài)管理方案，比如React常用的Flux，Redux，Mobx，Vue的Vuex，Angular的ngrx/store，Redux并不是React的專屬，而是針對(duì)Redux有最優(yōu)的解決方案，當(dāng)然Redux同樣也能移植到其他框架使用，比如可以在微信小程序中使用。

四、微信小程序如何選擇應(yīng)用狀態(tài)管理工具庫(kù)？

目前微信有移植的Redux與Mobx來(lái)作為應(yīng)用狀態(tài)管理，Redux 和 Mobx 都是當(dāng)下比較火熱的數(shù)據(jù)流模型，一個(gè)背靠函數(shù)式，似乎成為了開(kāi)源界標(biāo)配，一個(gè)基于面向?qū)ο?，低調(diào)的前行。

函數(shù)式 vs 面向?qū)ο?/p>

函數(shù)式的優(yōu)點(diǎn)：

將數(shù)據(jù)和處理邏輯分離，代碼更加簡(jiǎn)潔，模塊化，可讀性好  易測(cè)試、易維護(hù)，測(cè)試環(huán)境容易模擬  邏輯代碼可復(fù)用性強(qiáng)  相對(duì)比面向?qū)ο蟮木幊蹋?/p>

javascript的弱類型，表明它基于對(duì)象，不適合完全函數(shù)式表達(dá)。  數(shù)學(xué)思維和數(shù)據(jù)處理適合用函數(shù)式，而業(yè)務(wù)邏輯的處理適合用面向?qū)ο蟆?nbsp; 邏輯嚴(yán)謹(jǐn)?shù)暮瘮?shù)式編程相當(dāng)完美，但為了實(shí)現(xiàn)具體業(yè)務(wù)功能不得不寫(xiě)更多細(xì)粒度代碼來(lái)實(shí)現(xiàn)，而面向?qū)ο蟮姆绞礁鼮楹?jiǎn)潔和靈活。  Redux vs Mobx

那么具體到這兩種模型，又有一些特定的優(yōu)缺點(diǎn)呈現(xiàn)出來(lái)。

先來(lái)看 Redux 的特點(diǎn):

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.  
8. const example = createReducer(fromJS({
9. title: "項(xiàng)目構(gòu)建成功"
10. }),{
11. [EXAMPLE]: (state, action) => {
12. return state.merge({
13. title: action.payload.title
14. })
15. }
16. })
17.  
18. const rootReducer = combineReducers({
19. example
20. })
21.  
22. export default rootReducer

action

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

聲明式編程 reducer  純函數(shù) action 無(wú)副作用  不可變數(shù)據(jù) immutable  對(duì)比Mobx：

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

數(shù)據(jù)流流動(dòng)不自然，只有用到的數(shù)據(jù)才會(huì)引發(fā)綁定，局部精確更新，但免去了粒度控制煩惱。  想要時(shí)間回溯能力需要自建回溯數(shù)據(jù)較復(fù)雜，因?yàn)閿?shù)據(jù)只有一份引用。  自始至終一份引用，不需要 immutable，也沒(méi)有復(fù)制對(duì)象的額外開(kāi)銷。  數(shù)據(jù)流動(dòng)由函數(shù)調(diào)用一氣呵成，便于調(diào)試。  由于沒(méi)有 magic，所以沒(méi)有中間件機(jī)制，沒(méi)法通過(guò) magic 加快工作效率（這里 magic 是指 action 分發(fā)到 reducer 的過(guò)程）。  完美支持 typescript。  項(xiàng)目中如何選擇

兩者還有更本質(zhì)的區(qū)別在于Redux將state與action互相獨(dú)立，因此一個(gè)action可以將數(shù)據(jù)分發(fā)到多個(gè)state上，多個(gè)state都屬于全局唯一的store中；而Mobx中action屬于  store定義的object對(duì)象，因此只能對(duì)自身的state進(jìn)行數(shù)據(jù)處理。越復(fù)雜的項(xiàng)目Redux的優(yōu)勢(shì)越明顯。

從目前經(jīng)驗(yàn)來(lái)看，建議前端數(shù)據(jù)流不太復(fù)雜的情況，使用 Mobx，因?yàn)楦忧逦瑢?shí)現(xiàn)同一業(yè)務(wù)的代碼更少；如果前端數(shù)據(jù)流極度復(fù)雜，建議使用 Redux+immutable，通過(guò)中間件減緩巨大業(yè)務(wù)復(fù)雜度。另外，用Mobx的時(shí)候可以使用typescript來(lái)輔助。

五、在小程序中的使用Mobx

在小程序項(xiàng)目中由于小程序框架自身的特性，組件化使用較為復(fù)雜，因此不會(huì)將頁(yè)面切分成細(xì)粒度組件，因此使用Mobx對(duì)于小程序來(lái)說(shuō)要更為靈活。

index.js

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

index.wxml

1. <import src="../../components/toast/index.wxml" />
2. <template is="zan-toast" data="{{ zanToast }}"></template>
3. <view class="container">
4. <view class="userinfo">
5. <image class="userinfo-avatar" src="{{props.userInfo.data.avatarUrl}}" background-size="cover"></image>
6. <text class="userinfo-nickname">{{props.userInfo.data.nickName}}</text>
7. </view>
8. <view class="userorder">
9. <view class="userorder-title">{{props.userInfo.title}}</view>
10. <view class="userorder-list">
11. <view class="orderinfo" wx:key="{{index}}" wx:for-index="key" wx:for="{{props.userInfo.order}}">
12. <view class="orderinfo-date">發(fā)車時(shí)間：{{item.trainDate}}</view>
13. <view class="orderinfo-traininfo">車次信息：{{item.trainCode+' '+item.startCity+'——'+item.endCity+' '+item.seatName}}</view>
14. <view class="orderinfo-date">預(yù)約時(shí)間：{{item.created}}</view>
15. </view>
16. </view>
17. </view>
18. </view>

六、參考文檔

Mobx文檔 http://cn.mobx.js.org/

小程序文檔 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

小程序案例——火車票查詢|余票預(yù)約通知 https://github.com/Vizn/wechat_ticket