前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何使用小程序实现类似Vux的功能

如何使用小程序实现类似Vux的功能

作者头像
andyhu
发布2023-03-08 15:47:46
1K0
发布2023-03-08 15:47:46
举报
文章被收录于专栏:andyhu-大前端andyhu-大前端

背景

微信小程序原生没有提供全局的状态管理相关的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 值来更新所有页面的全局状态值。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 实现思路
  • 示例代码
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档