小程序 全局数据共享

什么是全局数据共享

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

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

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

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

lmobx-miniprogram 用来创建 Store 实例对象

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

全局数据共享 - MobX

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

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

注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。（我们真正使用的包是 miniprogram_npm 构建后的包）

2.在store.js中，创建 MobX 的 store 实例

import { observable, action} from "mobx-miniprogram"
export const store = observable({
	// 数据字段
	numA:1,
	numB:2,
	// 计算属性，使用 get 关键字修饰
	get sum(){
	  return this.numA + this.numB
	},
	// action 方法，用来修改 store 中的数据
	myUpdateNum1:action(function (step) {
	  this.numA += step
	})
})

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

// 页面的 .js文件
  import { createStoreBindings } from 'mobx-miniprogram-bindings'
  import { store } from '../../store/store'
  
  Page({
  
    // 生命周期函数--监听页面加载
    onLoad: function (options) { 
        // 返回的方法绑定给 this.storeBindings
        this.storeBindings = createStoreBindings(this, {
            store,
            fields: ["numA", "numB", "sum"],
            actions: ["updateNumA", "updateNumB"]
        })
    },
    
    // 生命周期函数--监听页面卸载
    onUnload: function () {
        // 销毁
        this.storeBindings.destroyStoreBindings()
    },
    
    // 按钮 tap 事件的处理函数
    handleNum(e){
     // 调用并传参给 store 中定义的方法
     this.updateNumA(e.target.dataset.step)
  },
    
  })
  
// 页面的 .wxml 结构
  <view>
      {{numA}} + {{numB}} = {{sum}}
  </view>
  
  <van-button bindtap="handleNum" data-step="{1}}">
      numA + 1
  </van-button>
  
  <van-button bindtap="handleNum" data-step="{{-1}}">
      numA - 1
  </van-button>
  <view>

4.将 Store 中的成员绑定到【组件中】

// 组件的 .js文件
 import { storeBindingsBehavior} from 'mobx-miniprogram-bindings'
 import { store } from "../../store/store"
 
 Component({
    // 通过 storeBindingsBehavior 来实现自动绑定
    behaviors:[storeBindingsBehavior],
    
    storeBindings:{
        store,    // 指定要绑定的store
        fields:{  // 指定要绑定的字段数据
            numA:"numA",  // 绑定字段的第 1 种方式
            numB:"numB",  
            sum:"sum",    
            numC:() => store.numC,    // 绑定字段的第 2 种方式
            numD:(store)=> store.numB // 绑定字段的第 3 种方式
            
        },
        actions:{  // 指定要绑定的方法
            updateNumB:"updateNumB"
        }
    },


    /**
     * 组件的方法列表
     */
    methods: {
        handleNum1(e){
            this.updateNumB(e.target.dataset.step)
        }
    }
})

// 组件的 .wxml文件
  <view>
      {{numA}} + {{numB}} = {{sum}}
  </view>
  
  <van-button bindtap="handleNum1" data-step="{{1}}">
      numA + 1
  </van-button>
  
  <van-button bindtap="handleNum1" data-step="{{-1}}">
      numA - 1
  </van-button>