本文主要是介绍【微信小程序】全局数据共享 - MobX，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. 什么是全局数据共享
2. 小程序中的全局数据共享方案
3.Mobx的使用
1.npm init -y(根据实际情况选择)
在小程序项目中，可以通过 npm 的方式引入 MobX 。
如果你还没有在小程序中使用过 npm ，那先在小程序目录中执行命令：
npm init -y
2. 安装 MobX 相关的包
在项目中运行如下的命令，安装 MobX 相关的包：
npm install --save mobx-miniprogram mobx-miniprogram-bindings
安装指定版本：
3.构建npm(一定要记得)
MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。
4.创建 MobX 的 Store 实例
- 在
根目录下创建Store/store.js文件。- 从
mobx-miniprogram包中导入observable和action两个方法。
- observable: 用于创建 store 的实例对象
- action: 用于包裹修改 store 数据的函数
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 成员绑定到页面中使用，可分三个步骤：
-
- 在页面 js 文件导入需要的成员。–
createStoreBindings
- 在页面 js 文件导入需要的成员。–
-
- 在 onLoad 开始生命周期进行绑定。
-
- 在 onUnload 生命周期取消监听。
// 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 中的成员
<!--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 这三个属性。 
// 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 中的成员
<!--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>
这篇关于【微信小程序】全局数据共享 - MobX的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
