小程序实现全局数据共享

Posted 2022-06-09 SpaceX7_s

1安装数据共享第三方包 Mobx

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

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

2. 创建 MobX 的 Store 实例

在根目录下创建store文件夹，并创建store.js文件

import observable,action from 'mobx-miniprogram'

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

4.在页面中使用store

//首先引入方法
import  createStoreBindings  from "mobx-miniprogram-bindings";
import store from '../../store/store'

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
  this.storeBindings=  createStoreBindings(this,
      //数据源
      store,
      //映射变量和计算属性
      fields:['numA','numB','sum'],
      //映射方法
      actions:['updateNum1']
    )
  ,
   /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () 
      this.storeBindings.destroyStoreBindings()
  ,

在页面中使用store的数据

<view>numA+numB=sum</view>
<button type="primary" bindtap="btnclick" data-step="1">numA+1</button>
<button type="primary" bindtap="btnclick" data-step="-1">numA-1</button>
//在js中调用方法
 btnclick(e)
     this.updateNum1(e.target.dataset.step)
  ,

在组件中使用store

import  storeBindingsBehavior  from "mobx-miniprogram-bindings";
import  store  from "../../store/store";
 //通过storeBindingsBehavior来实现自动绑定
  behaviors: [storeBindingsBehavior],
  /**
   * 组件的属性列表,接收页面传过来的参数
   */
  storeBindings: 
    
    store,//指定要绑定的store
    fields:

      numA:'numA',
      numB:'numB',
      sum:'sum'
    ,
    actions: //指定要绑定的方法
      updateNum2: 'updateNum2'
    
  ,

页面中使用

<view>numA+numB=sum</view>
<button type="primary" bindtap="btnclick" data-step="1">numA+1</button>
<button type="primary" bindtap="btnclick" data-step="-1">numA-1</button>
//在methods中调用方法
 btnclick(e)
      
      this.updateNum2(e.target.dataset.step)