小程序全局数据共享 mobx (摸拜科s)

小程序全局数据共享 mobx (摸拜科s)

1. 什么是全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

2. 小程序中的全局数据共享方案

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：

• mobx-miniprogram 用来创建 Store 实例对象

• mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

全局数据共享 - MobX

1. 安装 MobX 相关的包

在项目中运行如下的命令，安装 MobX 相关的包：

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意：安装完后，重新构建npm，如果是旧版的则是删除 miniprogram_npm 目录后，重新构建 npm

2. 创建 MobX 的 Store 实例

// 在这个 JS 文件中，专门来创建 Store 的实例对象
// ES6 的按需导入
import { observable, action } from 'mobx-miniprogram'

// ES6 的导出语法
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  // 计算属性
  get sum(){
    return this.numA + this.numB
  },
  // actions 函数，专门用来修改 store 中数据的值
  updateNum1: action(function (step) {
    this.numA += step
  }),
  updateNum2: action(function (step) {
    this.numB += step
  }),
})

3. 将 Store 中的成员绑定到页面中

// 页面的 .js 文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({
  btn(e){
    this.updateNum1(e.currentTarget.dataset.step)
  },
  onLoad(){
    // 第一个参数 this 代表当前页面的实例
    this.storeBindings = createStoreBindings(this, {
      store, // 数据源，把store的对应属性和方法绑定到页面实例上
      fields: ['numA','numB','sum'], // 哪些字段绑定到当前页面
      actions: ['updateNum1'] // 哪些方法绑定到当前页面
    })
  },
  onUnload(){
    // 把绑定的数据和方法清理掉
    this.storeBindings.destroyStoreBindings()
  }
})

createStoreBindings 有个返回值可以做最终的清理工作，赋值到this的自定义属性 storeBindings ，然后调用

destroyStoreBindings 进行清理工作

如果没有显示出内容，可以尝试重启开发者工具

4. 在页面上使用 Store 中的成员

5. 将 Store 中的成员绑定到组件中

// storeBindingsBehavior 是一个桥梁专门将 store 的数据或成员映射到当前的组件中来进行使用
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({
  behaviors: [storeBindingsBehavior],//通过storeBindingsBehavior实现自动绑定

  storeBindings: {
    store, 
    fields: { // 指定要绑定的字段数据
      numA: () => store.numA,       //绑定的第一种方式
      numB: (store) => store.numB,  //绑定的第2种方式
      sum: 'sum'                    //绑定的第3种方式
    },
    actions: {    // 指定要绑定的方法
      // 前面的 updateNum2 是组件自定义的方法 指向的是 store 中 updateNum2 的方法
      updateNum2: 'updateNum2'
    }
  },

})

注意：与绑定到页面不同，fields 和 actions 是对象，不是数组

6. 在组件中使用 Store 中的成员

学习总结于黑马程序员的B站视频