背景：
对于全局变量操作，如果不规范使用很容易产生意想不到的问题，使用mobx对全局变量进行管理，能够规范代码操作，使程序变得简单高效。
代码使用：
1）定义全局变量
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
// 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
<view class="page1">
<view bind:tap="handleJumpTo">跳转page2</view>
<view>全局变量:{{count}}</view>
</view>3）页面2中更改该变量。
// 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() {
}
})<!--packageA/pages/page1/page1.wxml-->
<view>
<view bind:tap="add">更改全局变量</view>
<view>全局变量：{{count}}</view>
<view bind:tap="handleBack">返回查看全局变量</view>
</view>
4）测试。页面1跳转至页面2，页面点击更改变量后返回页面1，全局变量同步发生了变化。文章来源：https://www.toymoban.com/news/detail-827082.html
文章来源地址https://www.toymoban.com/news/detail-827082.html
到了这里，关于小程序全局变量管理-mobx引入与使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
