基于Mobx的多页面小程序的全局共享状态管理实践

SexySix 发布于2019-08-20 18:20 / 1507人阅读

摘要：所以虽然是是用在小程序上，不过我想对于的状态管理，也有这么一丢丢启发。在目录下放入和这两个库，同时在目录下新建用于存放全局状态。建立由于小程序中不支持装饰器，所以采用了的写法。另外，小程序中不支持路径的省略。

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

专线服务服务器托管共享小程序共享位置小程序微信内h5页面打开小程序基于webrtc的屏幕共享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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