【微信小程序】-- 全局数据共享 - MobX(四十三)

简介: 【微信小程序】-- 全局数据共享 - MobX(四十三)



一、全局数据共享

  前面已经介绍了WXSS模板语法-rpx & import,通过栗子学习了WXSS模板语法如何导入公共样式。接下来就来讲解一下全局数据共享。话不多说,让我们原文再续,书接上回吧。

1、什么是全局数据共享

  全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。基本上学习了一种数据共享方案,再学习其他就会容易很多。

  如图所示,当不使用数据共享的时候,节点之间的传值就会特别麻烦。

2、小程序中的全局数据共享方案

  在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中:

  • mobx-miniprogram 用来创建 Store实例对象。
  • mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用。

二、全局数据共享

1、安装 MobX 相关的包

  在项目中运行如下的命令,安装 MobX 相关的包:

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

  注意:MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后,重新构建 npm。

2、创建 MobX 的 Store 实例

  创建 store 文件,用于存储与 MobX 相关的 js 文件。

  接下来就在这个 js 文件中创建 Store 的实时对象,定义 action 方法来修改 store 中的值,在实际开发过程中,是不允许外界直接修改 store 里的值,只能通过 store 定义的函数进行修改。

store.js

import {observable, action} from 'mobx-miniprogram'
// observable 的返回值就是 store 对象
export const store = observable({
  // 需要挂载的数据 -- 数据字段
  numA: 1,
  numB: 3,
  name: "我是夜阑的狗",
  // 计算属性 -- get为修饰符
  get sum(){
    return this.numA + this.numB;
  },
  // actions 函数,专门来修改 store 中数据的值
  updateNum1: action(function(step){
    this.numA += step;
  }),
  updateNum2: action(function(step){
    this.numB += step;
  }),
  updateName: action(function(name){
    this.name = name;
  })
})

3、将 Store 中的成员绑定到页面中

  在小程序中,将 store 成员绑定到页面中使用,可分三个步骤:

  • Step 1、在页面 js 文件导入需要的成员。
  • Step 2、在 onLoad 开始生命周期进行绑定。
  • Step 3、在 onUnload 生命周期取消监听。

message.js

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNum1']
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
})

  其中 createStoreBindings 中的 this 指向当前调用该函数的实例,也就是 message 页面实例,第二个参数是一个对象,store 代表着数据源,将 store 的属性或者方法绑定到页面实例中。fields 是绑定到页面实例中的数据字段, actions 是绑定到页面实例中的方法。

   this.storeBindings 是接收 createStoreBindings 的返回值,并挂载在页面上,当页面卸载时需要进行清空操作。

4、在页面上使用 Store 中的成员

  接下来通过按钮方式对 Store 的成员进行修改, 具体代码如下所示:

message.wxml

  通过 data-step="{{1}}" 的来给页面 data 数据传参。

<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numB - 1</van-button>

message.js

Page({
  btnHandler(e){
    this.updateNum1(e.target.dataset.step);
  },
})

  可以来看一下运行效果:

5、将 Store 中的成员绑定到组件中

  前面已经了解了如何将 Store 中的属性方法绑定到页面中,接下来学习如何绑定到组件中,实现步骤可分为三个步骤:

  • Step 1、在页面 js 文件导入需要的成员。
  • Step 2、在 Component 提供 behaviors 节点来存储前面导入的 Behaviors 数组。
  • Step 3、在 behaviors 节点平级的位置声明 page 对象接收 store、fields 和 actions 这三个属性。

  创建 numbers 组件并进行全局引用。

app.json

{
  "usingComponents":{
    "my-numbers": "./components/numbers/numbers"
  },
}

numbers.js

  fields 绑定字段有三种方式。

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  // 通过 storeBindingsBehavior 来实现自动绑定
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      // 绑定字段的三种方式
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: 'sum'
    },
    actions:{
      updateNum2: 'updateNum2'
    }
  },
 })

6、在组件中使用 Store 中的成员

  最后就是在组件上使用 Store 数据源了,具体代码如下所示:

message.wxml

  使用组件。

<view>------------------</view>
<my-numbers></my-numbers>

numbers.wxml

  这里对 numB 进行改动。

<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>

numbers.js

Component({
  /**
   * 组件的方法列表
   */
  methods: {
    btnHandler2(e){
      this.updateNum2(e.target.dataset.step);
    }
  }
})

  到这里基本上完成组件上 store 的使用,可以看到当点击按钮对 numB 进行修改时,上面的数据也是跟着一起修改的,来看一下运行效果:


总结

  感谢观看,这里就是全局数据共享 - MobX的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
小程序 JavaScript
【小程序】全局数据共享
【小程序】全局数据共享
191 0
【小程序】全局数据共享
|
小程序 前端开发 JavaScript
微信小程序--》小程序—全局数据共享和分包
⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。
262 0
微信小程序--》小程序—全局数据共享和分包
|
JSON 小程序 JavaScript
【微信小程序】——Mobx全局数据共享和分包
【微信小程序】——Mobx全局数据共享和分包
【微信小程序】——Mobx全局数据共享和分包
|
3天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
3天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
3天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
3天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
3天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
14 0
|
3天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
13 1
|
3天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)

热门文章

最新文章