基于Mobx的多頁面小程序的全局共享狀態管理實踐

SexySix 發布于2019-08-20 18:20 / 1658人閱讀

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

what

名字很長很繞靠口，總的來說，本文是對開發小程序過程中使用mobx的一個總結。

狀態管理，相比大家也很熟悉，顧名思義，是對前端頁面繁復的狀態進行管理，在此，我也不過多贅述。

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

why

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

為什么是mobx
方便，快捷，學習成本低，當然也是仁者見仁智者見智

how

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

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

// 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;    //此處調用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(),如果我們想全局調用，勢必不可能在每個頁面都new一個sotre，因為這樣的話每個頁面的store都是一個全新的store。在這里，我在app.js里引入store，并掛載在全局變量globalData下。另外，小程序中不支持路徑的省略。

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

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

在pages里調用全局的store
可以同時使用內置的data進行雙向綁定哦

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

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

在頁面中調用store


      // 調用observable data
    {{item.id}}:{{item.name}}
  
  {{props.sotre.count}}    //  調用computed data

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

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

store和localStorage的長效存儲
考慮到網絡還有程序崩潰的問題，我將store存儲在localStorage中以便恢復，我在index.js的onLoad中調用get storage，在onHide中set storage。由于toJS方法返回了一個不支持[Symbol.iterator]()的對象，所以在store里進行了如下設置

// 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

講點其他

本項目的示例小程序地址weapp-bmscore，歡迎各位老鐵點個關注666

GPU云服務器云服務器共享小程序共享位置小程序微信內h5頁面打開小程序基于webrtc的屏幕共享

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84366.html

React組件設計實踐總結05 - 狀態管理

摘要：要求通過要求數據變更函數使用裝飾或放在函數中，目的就是讓狀態的變更根據可預測性單向數據流。同一份數據需要響應到多個視圖，且被多個視圖進行變更需要維護全局狀態，并在他們變動時響應到視圖數據流變得復雜，組件本身已經無法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態管理的相關方案。前幾篇文章在掘金首發基本石沉大海, 沒什么閱讀量. 可能是文章篇幅太長了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 評論0 收藏0
為 MobX 開啟 Time-Travelling 引擎

摘要：將收集到的實例及各類做標識并做好關系映射。但這并不意味著在序列化不友好的體系里不能實現從中喚醒應用。最后作為一個多范式的信徒，在一出現便取代了我心中在前端狀態管理領域的地位。原文鏈接注意：本文并非 mobx-state-tree 使用指南，事實上全篇都與 MST(mobx-state-tree) 無關。 showImg(https://segmentfault.com/img/bV...

琛ｈ。 2019-08-22 18:35 評論0 收藏0
【譯】Redux 還是 Mobx，讓我來解決你的困惑！

摘要：我現在寫的這些是為了解決和這兩個狀態管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數式編程是不斷上升的范式，但對于大部分開發者來說是新奇的。規模持續增長的應原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評論0 收藏0
利用Dawn工程化工具實踐MobX數據流管理方案

摘要：新的項目目錄設計如下放置靜態文件業務組件入口文件數據模型定義數據定義工具函數其中數據流實踐的核心概念就是數據模型和數據儲存。最后再吃我一發安利是阿里云業務運營事業部前端團隊開源的前端構建和工程化工具。本文首發于阿里云前端dawn團隊專欄。項目在最初應用 MobX 時，對較為復雜的多人協作項目的數據流管理方案沒有一個優雅的解決方案，通過對MobX官方文檔中針對大型可維護項目最佳實踐的...

0x584a 2019-08-21 17:19 評論0 收藏0
Redux 的問題：React、MobX 和 Realm 能解決嗎？

摘要：它是由一個非常聰明的人開發的，用來緩解在單頁面應用中管理狀態的問題。的問題沒有一種適合所有場景的完美工具。為設計的是世界的另一個新增內容，但目前僅適用于。這將導致最后期限延長，并且留下更多需要我們維護的代碼。原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不討厭 ...

snifes 2019-08-21 16:41 評論0 收藏0