小程序全局变量管理-mobx引入与使用

背景:

对于全局变量操作,如果不规范使用很容易产生意想不到的问题,使用mobx对全局变量进行管理,能够规范代码操作,使程序变得简单高效。

代码使用:

1)定义全局变量

javascript 复制代码
import { action, observable } from 'mobx-miniprogram'

export const testStore = observable({
  // 数据
  count: 0,
  // action
  add: action(function() {
    // 添加监听
    this.count = this.count + 1
  })
})

2)页面1中引用 该变量

page1.ts

javascript 复制代码
// pages/page1/page1.ts
import { testStore } from "../../store/test";
import { createStoreBindings } from "mobx-miniprogram-bindings";
Page({

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

  },
  handleJumpTo() {
    console.log("跳转")
    // wx.redirectTo({
    //   url: '/packageA/pages/page1/page1'
    // })
    wx.navigateTo({
      url: '/packageA/pages/page1/page1'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    createStoreBindings(this,{
      store: testStore,
      fields: ['count']
    })
  },

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

  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

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

  },

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

  },

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

  }
})

page1.wxml

XML 复制代码
<view class="page1">
  <view bind:tap="handleJumpTo">跳转page2</view>
  <view>全局变量:{{count}}</view>
</view>

3)页面2中更改该变量。

javascript 复制代码
// packageA/pages/page1/page1.ts
import { testStore } from '../../../store/test'
import { createStoreBindings } from "mobx-miniprogram-bindings";
Page({

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

  },
  handleBack() {
    wx.navigateBack({})
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    createStoreBindings(this,{
      store: testStore,
      fields: ['count'],
      actions: ['add']
    })
  },

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

  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

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

  },

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

  },

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

  }
})
XML 复制代码
<!--packageA/pages/page1/page1.wxml-->
<view>
  <view bind:tap="add">更改全局变量</view>
  <view>全局变量:{{count}}</view>
  <view bind:tap="handleBack">返回查看全局变量</view>
</view>

4)测试。页面1跳转至页面2,页面点击更改变量后返回页面1,全局变量同步发生了变化。

相关推荐
CC同学呀9 分钟前
从0到100:单位订餐统计小程序开发日记2025
小程序
某公司摸鱼前端9 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~11 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程16 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏17 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron