微信小程序全局共享数据 mobx

尚梦

已于 2023-12-10 22:36:46 修改

阅读量703

点赞数 7

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-12-10 22:34:48 首次发布

本文链接：https://blog.csdn.net/qq_42164957/article/details/134915854

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用MobX进行状态管理和全局数据共享，包括安装步骤、创建store文件、在页面和成员组件中使用store及action方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

一. 安装

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

安装完之后要重新构建工具---->构建npm

二. 创建store文件夹以及store.js

import { observable, action } from 'mobx-miniprogram';

// observable 的返回值就是 store 对象
export const store = observable({
    // 需要挂载的数据 -- 数据字段
    numA: 1,
    // 计算属性 -- get为修饰符
    // get sum() {
    //     return this.numA + this.numB;
    // },


    // actions 函数，专门来修改 store 中数据的值
    updateNum1: action(function (step) {
        this.numA += step;
    }),
})

三. 在page页面中使用 stroe

其中在页面上我就直接拿this.data.numA以及方法this.updateNum1(); 使用就行

import {createStoreBindings} from 'mobx-miniprogram-bindings';
import {store} from '../../store/store';

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

四. 在成员组件中使用store

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: 'updateNum1'
    }
  },
 })