微信小程序中的全局数据共享(状态管理)使用介绍

这篇具有很好参考价值的文章主要介绍了微信小程序中的全局数据共享(状态管理)使用介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

开发工具:微信开发者工具Stable 1.06 

一、状态管理简介

微信小程序全局状态是指可以在不同页面之间共享的数据或状态。

它可以存储用户的登录状态、个人信息、全局配置信息等。

二、安装MobX

1、安装NPM 

在资源管理器的空白地方点右键,选择“在外部终端窗口中打开”,注意要用管理员权限打开

微信小程序中的全局数据共享(状态管理)使用介绍,微信小程序,微信小程序,小程序

输入 npm init -y

微信小程序中的全局数据共享(状态管理)使用介绍,微信小程序,微信小程序,小程序

 在“工具”一栏中选择“构建NPM”

微信小程序中的全局数据共享(状态管理)使用介绍,微信小程序,微信小程序,小程序

2、安装MobX

步骤和上面一样,输入的代码改成下面这行:

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 

三、MobX简介

小程序中使用 mobx-miniprogram 和 mobx-miniprogram-bindings 实现全局数据共享

mobx-miniprogram 用来创建store实例对象

mobx-miniprogram-bindings 用来把Store中的数据和方法,绑定到组件或页面中使用

四、MobX在页面中的使用

1、创建全局数据store

在根目录下创建store文件夹,在store文件夹里面创建store.js文件

// 在这个 JS 文件中,专门来创建 Store 的实例对象

// 引入observable(存放数据), action(修改数据)
import { observable, action } from 'mobx-miniprogram'

// 创建store对象
export const store = observable({
  // 1 数据字段
  numA: 1,
  numB:2 ,
  // 2 计算属性
  get sum(){
    return this.numA + this.numB
  },
  // 3 action 方法,用来修改store中的数据
  // 普通页面中的方法不能修改这里的数据,方法要用 action() 包裹
  updateNum1:action(function(step){
    this.numA += step
  }),
  updateNum2:action(function(step){
    this.numB += step
  })
})

 2、使用全局数据store

先在js页面中挂载store 交给this

// 引入 操作全局数据的方法 createStoreBindings
// 引入 全局数据 store
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

// 在onLoad 中加载全局数据,可以按需加载
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions: ['updateNum1']
    })
  },

// 在onUnload中做下销毁
  onUnload: function () {
    this.storeBindings.destroyStoreBindings()
  },

再在WXML页面中使用

数据的使用

数据直接就可以使用,同时找两个页面写上展示数据

<view> {{numA}} + {{numB}} = {{sum}} </view>

方法的使用

传参: data-step="{{1}}"  调用: e.target.dataset.step

方法也可以直接使用

<button bindtap="btnHandler1" data-step="{{1}}">numA + 1</button>
<button bindtap="btnHandler1" data-step="{{-1}}">numA - 1</button>
 btnHandler1(e) {
    this.updateNum1(e.target.dataset.step)
  },

3、使用效果

在一个页面中修改全局数据,另一个页面的数据也会被修改

微信小程序中的全局数据共享(状态管理)使用介绍,微信小程序,微信小程序,小程序

五、MobX在组件中的使用

1、创建全局数据store

这个和上面的一样

2、使用全局数据store

引入 storeBindingsBehavior 和store

behaviors 绑定引入的 storeBindingsBehavior

把数据源里的数据和方法都赋值过来

fields 的赋值用数组和对象都可以,actions也一样,用数组和对象都可以,用数组写起来简单点文章来源地址https://www.toymoban.com/news/detail-631744.html

// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    // 数据源
    store,
    fields: {
      numA: 'numA',
      numB: 'numB',
      sum: 'sum'
    },
    actions: {
      updateNum2: 'updateNum2'
    }
  }
  
})

到了这里,关于微信小程序中的全局数据共享(状态管理)使用介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用全局事件实现在不同页面之间共享数据或触发特定的操作

    在微信小程序中,你可以使用全局事件来实现在不同页面之间共享数据或触发特定的操作。以下是一个示例代码: 在app.js文件中,定义全局事件: 在上述代码中,我们在App对象中定义了globalData对象,用于存储全局数据。同时,我们定义了onLaunch方法,在小程序初始化时执行

    2024年02月16日
    浏览(46)
  • 微信小程序状态共享

    随着移动互联网的快速发展,小程序作为一种轻量级、高效率的应用形式,逐渐成为了用户日常生活中必不可少的工具。在开发小程序时,状态共享是一种重要的技术实践,可以让小程序更加高效、更灵活地处理状态和数据的管理。本文将探讨小程序状态共享的概念、优势和

    2023年04月14日
    浏览(30)
  • 微信小程序实现全局参数共享,且实现全局参数变化时的页面间通信

    首先,微信小程序中并没有提供直接的全局事件系统来监听全局参数的变化。因此,我们需要采用其他方式来达到这一目的。一种常见的方法是使用全局变量和事件监听来模拟全局事件系统。 1. 定义全局变量和事件 在 app.js 中定义全局变量,并提供一个方法来更新这些变量并

    2024年04月15日
    浏览(47)
  • 微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理

    首先 我们打开终端 引入依赖 然后 如果你是新版开发者工具 就 构建一下 如果你是 老版本的 微信开发者工具 就打开右上角详情 选择本地管理 勾选 使用 npm 模块 然后 在根目录下创建一个 store.js 当然建在哪是你自己决定的 反正 后面能引入到就好 然后 store.js 编写代码如下

    2024年02月05日
    浏览(42)
  • C++笔记之设计模式全局状态管理类:使整个工程项目中的所有函数可以访问同一个变量,并且能够感知到这个变量的变化(变量共享)

    —— 杭州 2024-03-21 夜 实现方法 : 全局变量(不介绍) 单例模式 全局状态管理类 全局状态管理类+单例模式 静态变量或静态成员(不介绍) code review!

    2024年03月22日
    浏览(64)
  • 案例101:基于微信小程序的停车共享管理系统设计与实现

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 前言 系统展示 用户功能模块的实现 用户注册登录界面 首页界面 停车场界面

    2024年01月15日
    浏览(79)
  • 【毕业设计】基于微信小程序的共享图书借阅借还管理系统

    💗博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。 👇🏻 精彩专栏 推荐订阅👇🏻 计算机毕业设计精品项目案例-200套 🌟 文末获取源码+数据库+文档 🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编

    2024年02月05日
    浏览(63)
  • 微信小程序开发实战 ②③(全局数据共享)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 专栏连接🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞 👉 微信小程序 (🔥) 分包指的是把一个完整的

    2024年02月09日
    浏览(40)
  • 微信小程序(二)--- 数据绑定,事件绑定,全局配置window,tabBar,网络数据请求,request合法域名,GET,POST

    目录 一、WXML模板语法 1、数据绑定 (1)Mustache语法 2、事件绑定  (1)常用事件  (2)属性列表  (3)target和currentTarget的区别  (4)bindtap语法格式  (5)在事件处理函数中为data中的数据赋值 (6)事件传参 (7)bindinput的语法格式 (8)实现文本框(input)和data之间的数

    2024年02月04日
    浏览(47)
  • uniapp小程序自定义loding,通过状态管理配置全局使用

    一、在项目中创建loding组件 在uniapp的components文件夹下创建loding组件,如图: 示例代码: 二、在main.js中全局挂载store 三、配置loding状态管理(状态管理可以按自己的需求配置) 状态管理存储: 在store文件夹下创建modules文件,里面创建loding.js 模块统一暴露: 在store文件夹下创

    2024年02月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包