背景
微信小程序原生没有提供全局的状态管理相关的api,但往往在开发小程序功能的时候又需要使用全局的状态管理,那下面我们就来实现一个类似 vuex
的状态管理功能。
实现思路
其实我们只需要实现在全局存储数据,然后让小程序所有页面都能访问到,然后封装一个方法能够更新这个存储在全局的数据,并且更新到所有页面,这样就能实现类似 vuex 的功能了。
示例代码
代码语言:javascript复制export const store = {
// 刷新全局数据到当前页面
syncPage(page) {
const keys = page.onGlobalKeys || []
const globalData = getApp().data
const temp = {}
for (const key of keys) {
const data = globalData[key]
if (data != null) temp[key] = data
}
page.setData(temp)
},
// 刷新全局数据到所有页面
syncPages() {
const pages = getCurrentPages()
for (const page of pages) {
store.syncPage(page)
}
},
// 提交数据到全局数据,并更新到所有页面
commit(data, sync = true) {
Object.assign(getApp().data, data)
if (sync) store.syncPages()
},
// 同步全局数据到当前页
syncGlobalData(page) {
if (!page) return console.error('Sync Global Data Page is null => store.syncGlobalData(this)')
store.syncPage(page)
}
}
封装一个类,提供一个 syncPage
方法,每个页面需要用到全局什么数据,在 onGlobalKeys 定义所要用到的全局数据,syncPage
通过更新 onGlobalKeys
所对应的 key
值来更新所有页面的全局状态值。