微信小程序全局数据共享

最新推荐文章于 2024-07-05 16:07:52 发布

超级无敌暴龙战士大全

最新推荐文章于 2024-07-05 16:07:52 发布

阅读量411

点赞数

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/weixin_62902737/article/details/129094266

版权

文章介绍了微信小程序中如何使用MobX和mobx-miniprogram-bindings实现全局数据共享，包括安装相关包、创建Store实例、绑定数据到页面和组件以及在页面上操作数据的方法。

摘要由CSDN通过智能技术生成

微信小程序状态管理

一、什么是全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。
开发中常用的全局数据共享方案有：Vuex、Redux、MobX等。

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

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

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

1.安装Mobx相关的包

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意：Mobx相关的包安装完毕之后，记得删除mini-program_npm目录后，重新构建npm

2.创建MobX的store实例

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

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

import {createStoreBindings} from "mobx-miniprogram-bindings"
import {store} from "../../store/store"

Page(
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      action: ['updateNum1']
    })
  },
  onReady() {}, 
  
  onShow() {},
  
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    this.storeBindings.destroyStoreBindings()
  },

  onReachBottom() {},

  onShareAppMessage() {}
})

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

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

  btnHandler1(e){
    this.updateNumA(e.target.dataset.step)
  },

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

import {
  createStoreBindings, storeBindingsBehavior
} from "mobx-miniprogram-bindings"
import {
  store
} from "../../store/store"

Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields: {
      numA:()=>store.numA,//第一种
      numB:(store)=>store.numB,
      sum:'sum'
    },
    actions: {
      updateNumB:"updateNumB"
    }
  },
  properties: {},
  data: {},
  
  methods: {
    btnHandler2(e){
      this.updateNumB(e.target.dataset.step)
    }
  }
})