小程序 | 全局事件共享 + MobX

什么是全局数据共享

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

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

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

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

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

MobX

安装 MobX 相关的包

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

npm i --save [email protected] [email protected]

注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。

创建 MobX 的 Store 实例

// 在这个JS文件中，专门来创建 Store 的实例对象

// 按需导入包
import {
    
     action, observable } from 'mobx-miniprogram'
// 返回值就是 store 的实例
export const store = observable({
    
    
  // 需要共享的数据直接写在配置项里面就行
  numA: 1,
  numB: 2,
  // 定义计算属性  get 表示是只读的  sum 是计算属性的名字
  get sum() {
    
    
    return this.numA + this.numB
  },

  // 修改 store 中的数据，actions方法
  updateNumA: action(function (step) {
    
    
    this.numA += step;
  }),
  updateNumB: action(function (step) {
    
    
    this.numB -= step;
  })
})

-------------

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

1. 导入需要的成员
2. 在 onLoad 里面进行绑定的工作
3. 对返回值在 onUnload 里面进行清理的工作

// pages/message/message.js

import {
    
     createStoreBindings } from 'mobx-miniprogram-bindings'
// 1. 导入 store 的实例对象
import {
    
     store } from '../../store/store'

Page({
    
    
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
    // 2. 将 store 中需要的属性字段或方法，绑定到this所指向的页面上
    this.storeBindings = createStoreBindings(this, {
    
     // this指向 message当前页面
      store, // 数据源
      fields: ['numA', 'numB','sum'], // 将这个页面需要的数据字段绑定进来,
      actions: ['updateNumA'], // 需要的方法
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    
    
   // 3. 对返回值在 onUnload 里面进行清理的工作
    this.storeBindings.destroyStoreBindings();
  },
})

在页面上使用 Store 中的成员

1. 对于数据或计算属性，可以直接使用{ {}}来使用

   <view>numA：{
        
        {numA}}</view>
   <view>numB：{
        
        {numB}}</view>
   <view>{
        
        {numA}} + {
        
        {numB}} = {
        
        {sum}}</view>
   <vant-button type="primary" bindtap="btnHandler1" data-step="{
          
          {1}}">numA + 1</vant-button>
   <vant-button type="danger" bindtap="btnHandler1" data-step="{
          
          {-1}}">numA - 1</vant-button>
   

   

2. 对于方法，我们可以绑定事件处理函数，在事件处理函数里面使用映射过来的方法

     // 按钮的事件处理函数
     btnHandler1(e) {
         
         
       this.updateNumA(e.target.dataset.step)
     },
   

-------------

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

1. 在组件的JS 页面中按需引入 storeBindingsBehavior（将数据或成员映射到组件中） 和 store （数据源）

2. 挂载到 behaviors 数组节点中

3. 声明配置对象 storeBindings

// components/numbers/numbers.js 组件

// 1. 按需导入
import {
    
     storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import {
    
     store } from '../../store/store'
Component({
    
    
  // 2. 挂载到 behaviors 数组节点中
  behaviors: [storeBindingsBehavior],
  // 3. 声明配置对象 `storeBindings`
  storeBindings: {
    
    
    store, // 数据源
    fields: {
    
     // 绑定计算属性或数据字段
      numA: 'numA', // 绑定字段的方式一
      numB: () => store.numB, // 绑定字段的方式二
      sum: (store) => store.sum // 绑定字段的方式三
    },
    actions: {
    
     // 绑定方法 actions
      updateNumB:'updateNumB'
    } 
  },
})

在组件中使用 Store 中的成员

1. 对于数据或计算属性，可以直接使用{ {}}来使用
   

2. 对于方法，我们可以绑定事件处理函数，在事件处理函数里面使用映射过来的方法