基于Mobx的多頁面小程序的全局共享狀態(tài)管理實(shí)踐

SexySix 發(fā)布于2019-08-20 18:20 / 1661人閱讀

摘要：所以雖然是是用在小程序上，不過我想對于的狀態(tài)管理，也有這么一丟丟啟發(fā)。在目錄下放入和這兩個(gè)庫，同時(shí)在目錄下新建用于存放全局狀態(tài)。建立由于小程序中不支持裝飾器，所以采用了的寫法。另外，小程序中不支持路徑的省略。

what

名字很長很繞靠口，總的來說，本文是對開發(fā)小程序過程中使用mobx的一個(gè)總結(jié)。

狀態(tài)管理，相比大家也很熟悉，顧名思義，是對前端頁面繁復(fù)的狀態(tài)進(jìn)行管理，在此，我也不過多贅述。

所以雖然是是用在小程序上，不過我想對于WebApp的狀態(tài)管理，也有這么一丟丟啟發(fā)。

why

為什么要進(jìn)行狀態(tài)管理？
現(xiàn)在的小程序儼然是Hybrid App，又像是PWA，但當(dāng)然也是一個(gè)WebApp，更不用說他的語法和vue略微有這么一丟丟相似。有react和vue的實(shí)踐在前，所以對于小程序上那么多的頁面狀態(tài)和數(shù)據(jù)緩存，勢必也要引入一個(gè)狀態(tài)管理工具

為什么是mobx
方便，快捷，學(xué)習(xí)成本低，當(dāng)然也是仁者見仁智者見智

how

在小程序中引入mobx
在這里我使用了wechat-weapp-mobx這個(gè)庫。在./libs目錄下放入mobx.js和observer.js這兩個(gè)庫，同時(shí)在./store目錄下新建store.js用于存放全局狀態(tài)。

建立store
由于小程序中不支持@decorate裝飾器，所以采用了extendObservable的寫法。另外，小程序支持import語法和require語法。我比較喜歡import語法，你們呢？我認(rèn)為在action中不該寫入復(fù)雜邏輯代碼，保持簡潔性和可復(fù)用性，你們怎么看

// store.js
// 引入必須的庫
const mobx = require("../libs/mobx");
const extendObservable = require("../libs/mobx").extendObservable;
const computed = require("../libs/mobx").computed;
const toJS = require("../libs/mobx").toJS;

let store = function () {
  extendObservable(this, {

    // observable data
    players: [],

    // computed data
    get count() {
      return this.players.length;
    }
  });

  // action
  this.addPlayer = name => {
    let len = this.count;    //此處調(diào)用computed data
    let id = len === 0 ? 1 : this.players[len - 1].id + 1;
    this.players.push(new player(name, id));
  }
}

export default store;

全局引入store
眾所周知，使用mobx的store要使用new store(),如果我們想全局調(diào)用，勢必不可能在每個(gè)頁面都new一個(gè)sotre，因?yàn)檫@樣的話每個(gè)頁面的store都是一個(gè)全新的store。在這里，我在app.js里引入store，并掛載在全局變量globalData下。另外，小程序中不支持路徑的省略。

//app.js
const observer = require("./libs/observer").observer;
import store from "./stores/index";  // 小程序中不支持省略調(diào)用

App(observer({
  onLaunch: function () {
  },
  globalData: {
    store: new store()
  }
}))

在pages里調(diào)用全局的store
可以同時(shí)使用內(nèi)置的data進(jìn)行雙向綁定哦

// index.js
const observer = require("../../libs/observer").observer;

let app = getApp();
Page(observer({
  data: {
    mes: "hello jim green"
  },
  props: {
    store: app.globalData.store
  },
}))

在頁面中調(diào)用store


      // 調(diào)用observable data
    {{item.id}}:{{item.name}}
  
  {{props.sotre.count}}    //  調(diào)用computed data

更新多個(gè)頁面的store
問題來了，這個(gè)時(shí)候，多個(gè)頁面的store還是獨(dú)立的，如何全部更新呢？答案就是在onShow和onHide或者onUnload這三個(gè)生命周期函數(shù)中跟新全局的store

onShow: function() {    // 顯示時(shí)更新本頁面store
  this.props.store = app.globalData.store
},
onHide: function() {   // 隱藏時(shí)更新全局store
  app.globalData.store = this.props.store;
},
onUnload: function() {    // 頁面跳轉(zhuǎn)返回時(shí)更新全局store
  app.globalData.store = this.props.store;
},

store和localStorage的長效存儲(chǔ)
考慮到網(wǎng)絡(luò)還有程序崩潰的問題，我將store存儲(chǔ)在localStorage中以便恢復(fù)，我在index.js的onLoad中調(diào)用get storage，在onHide中set storage。由于toJS方法返回了一個(gè)不支持[Symbol.iterator]()的對象，所以在store里進(jìn)行了如下設(shè)置

// index.js
onLoad: function () {
  let store = wx.getStorageSync("store");
  if(store) {
    this.props.store.formStorageToStore(store);
  }
},
onHide: function () {
  
  let store =this.props.store.currentStore;
  wx.setStorageSync("store", store)
},

// store.js
  get currentStore() {
    let {players,games,currentGame,hidden,filter} = toJS(this);
    return {players,games,currentGame,hidden,filter};
  }
  this.formStorageToStore = ({players,games,currentGame,hidden,filter}) => {
    this.players = players;
    this.games = games;
    this.currentGame = currentGame;
    this.hidden = hidden;
    this.filter = filter;
  }

others

講點(diǎn)其他

本項(xiàng)目的示例小程序地址weapp-bmscore，歡迎各位老鐵點(diǎn)個(gè)關(guān)注666