uni-app入门:全局数据共享方案之mobx

简介: 全局数据共享也叫作状态管理,主要用于组件间数据共享问题的处理.实际开发中常用的实现方案:vuex、redux、mobx,本文主要介绍mobx.

1.全局数据共享介绍


    全局数据共享也叫作状态管理,主要用于组件间数据共享问题的处理.实际开发中常用的实现方案:vuex、redux、mobx,本文主要介绍mobx.


2.准备工作


mobx需要引入两个npm包:

   mobx-miniprogram:用于创建store实例对象

   mobx-miniprogram-bindings:用于将store中数据或是方法绑定到组件或是页面中.

   安装命令(项目所在目录下执行):

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

204440b5fe381215cfa305e9d9b88385_97d9aa3e91504dc7b59fda786edda970.png

   安装完成之后,如果项目中存在miniprogram-npm文件夹则删除之后重新构建.构建完成之后重新生成的miniprogram-npm中会出现mobx-miniprogram 和mobx-miniprogram-bindings,构建方式以及构建完成新增文件夹如下:

da33fd5c8156071d580f5136156679eb_a1debd2759f04508815540db4eeaffeb.png


3.使用说明


   第一步创建store对象用于存储共享的数据或是方法;

   第二步将store数据或是方法绑定到页面或是组件中;

   第三步页面或是组件中使用全局共享数据或是方法.

   下面以案例的形式分别说明如何在页面或是组件中进行全局数据共享.


3.1 page页面进行全局数据共享

示例说明:

   定义num1、num2、sum12,sum12为num1和num2的和,创建两个按钮,分别实现点击之后对num1进行加2或是减2的操作.同时sum12能随着num1值的变化同时进行改变.

9a5da9c64ab2580b89fc0ddab433e12d_99cbc5c986e44aa6a8e2d88e00629a71.png

创建store对象:

根目录中创建store文件夹,然后创建store.js文件.store.js中内容如下:

// 导入mobx-miniprogram中的observable方法 
import {observable} from 'mobx-miniprogram';
// 调用observable方法创建store对象实例并导出进行共享
export const store=observable({
  // 定义数据
  num1:1,
  num2:2,
  // 计算数据属性
  get sum12() {
   console.log("sum12方法执行")
   return this.num1+this.num2
  },
  // 更新方法1用于修改num1的值
  updateNum1:action(function(step){
  this.num1+=step;
  }),
  // 更新方法2用于修改num2的值
  updateNum2:action(function(step){
  this.num2+=step;
  })
})


index.js中进行页面绑定store对象数据和方法:

// 导入创建store绑定方法
import {createStoreBindings} from 'mobx-miniprogram-bindings'
// 导入store实例对象
import {store} from '../../store/store'
Page({
  // 页面加载设置store绑定成员信息
  onLoad:function(){
   this.storeBindings=createStoreBindings(this,{
   store,
   fields:['num1','num2','sum12'],
   actions:['updateNum1']
   })
  },
  // 页面卸载时清理处理
  onUnload:function(){
    this.storeBingds=this.destroyStoreBindings()
  },
  // 按钮点击时触发的方法
  addNum(e){
    // 执行修改num1方法并按照指定步长step进行相加
    this.updateNum1(e.target.dataset.step)
  }
})


index.wxml页面中使用共享数据或是方法:

<view>{{num1}} + {{num2}} = {{sum12}}</view>
<van-button type="primary" bindtap="addNum" data-step='{{2}}'>num1加2</van-button>
<van-button type="warning" bindtap="addNum" data-step='{{-2}}'> num1减2</van-button>

3.2 component组件进行全局数据共享

示例说明:

   定义num1、num2、sum12,sum12为num1和num2的和,创建两个按钮,分别实现点击之后对num2进行加3或是减3的操作.同时sum12能随着num2值的变化同时进行改变.创建test组件在index页面进行引用.

25d53ffc26f752698ae0fccfa650d15d_6989cb1ffe1f471da4e6de2aa3d29f28.png

创建store对象同上示例,此处不再重述;

test.js中绑定store对象的数据或是方法:

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
  Component({
    behaviors:[storeBindingsBehavior], // 使用mobx-miniprogram-bindings中storeBindingsBehavior进行数据共享
    storeBindings:{
      store,
      fields:{  // 绑定数据,前者为组件中数据名,后者为store中定义的数据名,两者可不一致
        num1:'num1',
        num2:'num2',
        sum12:'sum12'
      },
      actions:{  // 绑定方法,前者为组件中方法名,后者为store中定义的方法名,两者可不一致
        updateNum2:'updateNum2'
      }
    }
})

test.wxml中调用store数据或是方法:

<view>{{num1}} + {{num2}} = {{sum12}}</view>
<van-button type="primary" bindtap="addNum" data-step='{{3}}'>num2加3</van-button>
<van-button type="warning" bindtap="addNum" data-step='{{-3}}'> num2减3</van-button>

index.wxml中引入test组件:

<view>{{num1}} + {{num2}} = {{sum12}}</view>
<van-button type="primary" bindtap="addNum" data-step='{{2}}'>num1加2</van-button>
<van-button type="warning" bindtap="addNum" data-step='{{-2}}'> num1减2</van-button>
<view>+++++++++++++++++++++++++++++++++++++</view>
<test></test>

最终实现效果如下:

4804d1eb18cbb2b78c4456878d162269_fff328a6bca346ac8e41eca701d88395.png


3.3综合案例:点击按钮实现自定义tabbar消息数同步变化

   案例说明:上篇文章uni-app入门:自定义tabbar介绍了如何自定义tabbar,此处在自定义tabbar的基础上介绍全局数据共享.pages/index页面中定义一参数num,初始化数据为2,点击按钮实现5操作,并将加5之后的num同步到tabbar的数字徽标上面.

a103dc0f6fb2eb22caca24b424130f78_86df5c606b1441999fd7afccdd3a333b.png

   实现思路说明:自定义tabbar上的数字徽标与pages/index页面中的num显示保持一致即可实现同步变化.可以将num作为全局数据共享的字段,分别绑定pages/index、自定义tabbar组件中。然后点击按钮实现num+5.

store/store.js中创建store对象(初始化num、定义num+5方法):

import {observable,action} from 'mobx-miniprogram'
export const store=observable({
  num:2,  // 初始化num
  // 变更num值,此处按照5进行增加
  updateNum:action(function(step){
      this.num+=step;
  })
})


   pages/index/index.js中绑定store中的num以及num+5方法:

// index.js
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
  // 点击事件函数
  addNum:function(event){
    // 点击事件触发全局共享方法逻辑
 this.updateNum(event.target.dataset.numinterval);
    // 此处实现num+5只能对当前页面num数据实现变化
 // this.setData({
    //   num:this.data.num+event.target.dataset.numinterval
    // })
  },
  onLoad() {
      // 绑定共享数据
  this.storeBindings=createStoreBindings(this,
        {
          store,
          fields:['num'],
          actions:['updateNum']
         }
        )
  },
  onUnload(){
    this.storeBindings.destoryStoreBindings();
  }
})

点击按钮实现num的加5的实现逻辑要放到全局数据处理中,这样才能保证全局共享数据中的num实现变化,如果在按钮的点击事件中进行num+5只能对当前页面的num值做出变化.

page/index/index.wxml:

<view>当前数字:{{num}}</view>
<van-button type="primary" bindtap="addNum" data-numInterval='{{5}}'>数字加5</van-button>

自定义tabbar组件index.js中绑定store对象的num:

// custom-tab-bar/index.js
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  // 映射参数绑定
  storeBindings:{
    store,
    fields:{ // 组件字段:store字段
      num:()=>store.num   //方式一
      //num:(store)=>store.num  // 方式二
     //  num:'num'             .// 方式三
    },
     // 映射方法绑定
  actions:{   // 组件方法:store方法
  }
  },
  data: {
    info:3,
    active: 0,
    icon: {
      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
      active: 'https://img.yzcdn.cn/vant/user-active.png',
    },
    "list": [{
      "pagePath": "/pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "/pages/logs/logs",
      "text": "搜索"
    },
    {
      "pagePath": "/pages/mine/mine",
      "text": "我的"
    }]
  },
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    }
  }
})

自定义tabbar组件index.wx中数字徽标映射num:

van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="{{num}}">
    <image
      slot="icon"
      src="{{ icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    自定义
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
相关文章
|
3月前
《仿盒马》app开发技术分享-- 确认订单页(数据展示)(29)
上一节我们实现了地址的添加,那么有了地址之后我们接下来的重点就可以放到订单生成上了,我们在购物车页面,点击结算会跳转到一个 订单确认页面,在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
98 3
|
5天前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
74 5
|
1月前
|
数据采集 数据可视化 API
驱动业务决策:基于Python的App用户行为分析与可视化方案
驱动业务决策:基于Python的App用户行为分析与可视化方案
|
5月前
|
数据采集 JSON 网络安全
移动端数据抓取:Android App的TLS流量解密方案
本文介绍了一种通过TLS流量解密技术抓取知乎App热榜数据的方法。利用Charles Proxy解密HTTPS流量,分析App与服务器通信内容;结合Python Requests库模拟请求,配置特定请求头以绕过反爬机制。同时使用代理IP隐藏真实IP地址,确保抓取稳定。最终成功提取热榜标题、内容简介、链接等信息,为分析热点话题和用户趋势提供数据支持。此方法也可应用于其他Android App的数据采集,但需注意选择可靠的代理服务。
214 11
移动端数据抓取:Android App的TLS流量解密方案
|
3月前
|
BI 开发工具 开发者
App全渠道统计方案:如何用一个工具整合所有获客渠道数据?
还在为地推、社群、广告等不同获客渠道的数据分散而烦恼吗?本文将教您如何用一个工具整合所有渠道数据,实现精准的渠道归因与效果分析。
109 0
|
6月前
|
安全 API Swift
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
425 15
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
|
5月前
|
数据采集 数据可视化 数据挖掘
基于Python的App流量大数据分析与可视化方案
基于Python的App流量大数据分析与可视化方案
|
5月前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
6月前
|
容器
【Azure Container App】在消耗性的Container App Environmnet中无法查看当时正在使用多少CPU多少实例数的替代方案
在 Azure Container Apps 中使用 Consumption 消耗型环境时,无法通过门户查看当前核心 (CPU) 和实例使用情况。这是因为消耗型工作负载配置文件的设计所致。若需查看使用状态,可使用 az cli 命令 `az containerapp env list-usages` 获取详细信息,包括 Current Cores 数量。文档还提供了参考资料链接以帮助用户深入了解相关命令用法。
111 17
|
5月前
|
人工智能 开发框架 小程序
【一步步开发AI运动APP】二、跨平台APP AI运动识别方案介绍
本系列博文旨在帮助开发者从【AI运动小程序】迈向性能更优的【AI运动APP】开发。通过「云智AI运动识别」uni-app版插件,提供本地原生极速识别、精准姿态检测及运动计时计数功能,支持健身系统、线上赛事、学生体测、康复锻炼等多场景应用。插件无需云端依赖,一次付费永久使用,成本低且扩展性强。同时兼容uni-app与uni-app x框架,适合不同技术背景的开发者快速上手,助力抢占AI辅助运动市场。下篇将介绍插件引入,敬请期待!