微信小程序全局数据共享

文章目录

• 安装MobX相关的包
• 根目录创建store文件夹，添加store.js文件
• 绑定到页面中
• 绑定到组件

mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享

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

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

安装MobX相关的包

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

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

根目录创建store文件夹，添加store.js文件

store.js

//在这个JS文件中，专门创建Store的实例对象
import {action, observable} from "mobx-miniprogram"

export const store =  observable({
  //里面声明共享数据
  numA:1,
  numB:2,
  //读取
  get sum(){
    return this.numA+this.numB
  },
  //修改
  updateNum1:action(function(step){
    this.numA += step
  }
  ),
  updateNum2:action(function(step){
    this.numB += step
  }
  ),
})

绑定到页面中

//页面的.js文件
import{createStoreBindings } from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前页面

Page({
  onLoad:function(){//生命周期函数--监听页面加载
    //第一个参数this代表该页面实例，第二个参数「store,fields,actios」分别代表数据源，字段，方法
    //自定义属性storeBindings为createStoreBindings方法的返回值
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
})
},
onUnload：function（）{//生命周期函数--监听页面卸载
    //清理绑定的数据和方法
    this.storeBindings.destroyStoreBindings()
}

绑定到组件

//组件的.js文件
import{storeBindingBehavior} from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前组件

Compoent({
  behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior来实现自动绑定
  storeBindings:{
    store,//指定要绑定的Store
    fields:{//指定要绑定的字段数据
     numA:()=>store.numA,//绑定字段的第一种方式
     numB:()=>store.numA,//绑定字段的第二种方式
     sum:'sum'           //绑定字段的第三种方式
    },
    actions:{//指定要绑定的方法
      updateNum2:"updateNum2"
    }
  },
})