背景:
对于全局变量操作,如果不规范使用很容易产生意想不到的问题,使用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,全局变量同步发生了变化。