【微信小程序】全局数据共享 - MobX

1. 什么是全局数据共享

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

3.Mobx的使用

1.npm init -y(根据实际情况选择)

在小程序项目中,可以通过 npm 的方式引入 MobX 。

如果你还没有在小程序中使用过 npm ,那先在小程序目录中执行命令:

javascript 复制代码
npm init -y

2. 安装 MobX 相关的包

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

java 复制代码
npm install --save mobx-miniprogram mobx-miniprogram-bindings

安装指定版本:

3.构建npm(一定要记得)

MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后重新构建 npm

4.创建 MobX 的 Store 实例

  1. 根目录下创建 Store/store.js 文件。
  2. mobx-miniprogram 包中导入 observableaction两个方法。
  • observable: 用于创建 store 的实例对象
  • action: 用于包裹修改 store 数据的函数
javascript 复制代码
import { observable,action} from 'mobx-miniprogram'
// observable 的返回值就是 store 对象
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  // 计算属性 get为修饰符
  get sum(){
    return this.numA + this.numB
  },
  //action方法,用来修改 store 中的数据
  updateNumA: action(function (step){
    this.numA += step
  }),
  updateNumB: action(function (step){
    this.numB += step
  })
})

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

在小程序中,将 store 成员绑定到页面中使用,可分三个步骤:

    1. 在页面 js 文件导入需要的成员。--createStoreBindings
    1. 在 onLoad 开始生命周期进行绑定。
    1. 在 onUnload 生命周期取消监听。
javascript 复制代码
// pages/message/message.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({
  addSumA(e){
    this.updateNumA(e.target.dataset.step)
  },

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields: ['numA','numB','sum'],
      actions: ['updateNumA']  // 注意是actions  不是action
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

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

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

其中 createStoreBindings 中的this指向当前调用该函数的实例,也就是 message 页面实例

第二个参数是一个对象,
store 代表着数据源,将 store 的属性或者方法绑定到页面实例中。
fields 是绑定到页面实例中的数据字段。
actions 是绑定到页面实例中的方法。
this.storeBindings 是接收 createStoreBindings 的返回值,并挂载在页面上,当页面卸载时需要进行清空操作。

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

javascript 复制代码
<!--pages/message/message.wxml-->
<text>pages/message/message.wxml</text>
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button bindtap="addSumA" data-step="{{1}}" type="primary">numA + 1</van-button>

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

Store 中的属性方法绑定到组件中,实现步骤可分为三个步骤:

  • 在组件 js 文件导入需要的成员。--storeBindingsBehavior
  • 在 Component 提供behaviors节点来存储前面导入的 Behaviors 数组。
  • 在 behaviors 节点平级的位置声明 storeBindings 对象接收 store、fields 和 actions 这三个属性。
javascript 复制代码
// components/my-number/my-number.js
import { 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: {
    addNumB(e){
      this.updateNumB(e.target.dataset.step)
    }
  }
})

8.在组件上使用 Store 中的成员

javascript 复制代码
<!--components/my-number/my-number.wxml-->
<text>components/my-number/my-number.wxml</text>
<view>-----------------组件---------------</view>
<van-button type="primary" bindtap="addNumB" data-step="{{1}}">numB + 1</van-button>
相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220693 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧