全局数据共享——MobX(微信小程序)

1. 定义:全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。而我们微信小程序常用的全局共享方案是:MobX在这里插入图片描述我们可以通过上面这张图清除的看到,如果不使用MobX全局数据共享的话,如果需要调用某个组件,则需要一层一层调用,如果定义了全局数据共享,那么可以直接拿到数据,不需要一层一层调用

2. 全局数据共享的具体方案
在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中:
mobx-miniprogram 用来 创建 Store 实例对象
mobx-miniprogram-bindings 用来 把 Store 中的共享数据或方法 , 绑定到组件或页面中使用
3. 使用
①通过npm安装MobX相关的包
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意:MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后,重新构建 npm。
先在项目目录下删除miniprogram_npm 目录,然后通过如下图重新构建npm
在这里插入图片描述②创建MobX的store实例
在根目录下新建store文件夹,然后在store文件夹下创建store.js文件
在这里插入图片描述然后在store.js中编写如下代码:

//在这个JS文件中,专门用来创建 Store 的实例对象
import {action, observable} from 'mobx-miniprogram'
 
export const store = observable({
    numA:1,
    numB:2,
    // 计算属性
    get sum(){
        return this.numA + this.numB
    },
    // actions 方式,用来修改store中的数据
    updateNum1:action(function(step){
        this.numA += step
    }),
    updateNum2:action(function(step){
        this.numB += step
    }),
  
})

③. 将 Store 中的成员绑定到页面中

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

④. 在页面上使用 Store 中的成员

//页面.wxml结构
 
<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}}">numA-1</van-button>
 
 
//按钮tap事件处理函数
btnHandler(e) {
    this.updateNum1(e.target.dataset.step)
  },

4.在组件中使用
在组件.js文件中引入,将Store绑定到组件中:

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from "../../store/store"
Component({
    behaviors:[storeBindingsBehavior],
    storeBindings:{
        //数据源
        store,
        fields:{
            numA:'numA',
            numB:'numB',
            sum:'sum'
        },
        actions:{
            updataNum2:'updateNum2'
        }
    },
    
    /**
     * 组件的属性列表
     */
    properties: {
 
    },
 
    /**
     * 组件的初始数据
     */
    data: {
 
    },
 
    /**
     * 组件的方法列表
     */
    methods: {
       
        }
    }
})

接下来在组件.wxml结构中使用

//组件.wxml结构
 
<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>
 
 
 
 
 /**
     * 组件的方法列表
     */
    methods: {
        btnHandler2(e){
            this.updataNum2(e.target.dataset.step)
        }
    }
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序是一种轻量级的应用程序开发平台,而Mobx是一种状态管理库。在微信小程序开发中,Mobx可以帮助我们更好地管理和控制应用程序的状态。 Mobx的核心概念是可观察的状态和动态计算。通过使用Mobx,我们可以将应用程序的状态定义为可观察的对象,当状态发生变化时,相关的观察者将自动被通知到。这种响应式的设计模式可以帮助我们更好地组织和管理应用程序的状态,并在状态变化时及时更新相关的界面。 在微信小程序中使用Mobx,我们首先需要将Mobx集成到我们的项目中。可以通过npm安装mobx,并在小程序的入口文件中引入和配置Mobx。接下来,我们需要定义可观察的状态。在小程序中,我们可以使用Mobx提供的@observable装饰器将我们的数据定义为可观察的属性。 当我们的可观察状态发生变化时,我们可以使用Mobx提供的@computed装饰器来定义动态计算属性。这些动态计算属性将根据可观察状态的变化而自动更新,以保持数据的一致性。 除了可观察状态和动态计算属性,Mobx还提供了其他一些功能,如@action装饰器用于定义状态的修改方法,@observer装饰器用于将组件与状态关联起来等等。这些功能可以帮助我们更好地管理和控制应用程序的状态。 总之,微信小程序中的Mobx是一个非常实用的状态管理库,可以帮助我们更好地组织、管理和控制应用程序的状态。通过使用Mobx,我们可以更高效地开发和维护小程序,并提供更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值