微信小程序:全局状态管理mobx-miniprogram(类似store)

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

一、背景

        需求是,每个播放视频的地方都有控制是否静音的按钮,点某一个静音则全局静音。

        问题:由于我的每个小卡片都是一个组件,本质是每个页面引几次同一个组件,刚开始用的setData,但是这样每个卡片中的数据都是经过深拷贝而独立的,所以点击某个按钮只会改变所在视频的声音状态。

        引申问题:也试过用app.globalData,这样只是在不同的页面有效,同一个页面多个组件还是无效。

微信小程序:全局状态管理mobx-miniprogram(类似store)

二、解决办法

        在小程序中,常常有些数据需要在几个页面或组件中共享。使用 MobX 来管理小程序的跨页面数据,  其实类似于vuex的store。

使用方法:

1.在小程序中引入 MobX

   方法一:直接将mobx-miniprogram,mobx-miniprogram-bindings两个文件夹引入项目

   方法二:在小程序项目中,可以通过 npm 的方式引入 MobX 。如果你还没有在小程序中使用过 npm ,那先在小程序目录中执行命令:

npm init -y

   引入 MobX :

npm install --save mobx-miniprogram mobx-miniprogram-bindings

   可以参考官方示例代码段:(在微信开发者工具中打开): https://developers.weixin.qq.com/s/nGvWJ2mL7et0https://developers.weixin.qq.com/s/nGvWJ2mL7et0 

2.创建MobX Store

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


//是否静音
const localVoice=wx.getStorageSync('voiceMuteStatus')
export const storeVoice = observable({
    //自定义属性和方法
	voiceMuteStatus: localVoice,
	updateVoice: action(function(voiceMuteStatus) {
		this.voiceMuteStatus = voiceMuteStatus
	})
})

3.在组件Component 构造器中使用

    如下代码,即可实现全局声音管理。

//引入storeBindingsBehavior和自定义的store方法
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';
import { storeVoice } from '../../store/index';


Component({

    //在behaviors中
    behaviors: [storeBindingsBehavior],

    data: {

    },
    //绑定自己写的store
    storeBindings: {
        store: storeVoice,
        fields: {
            voiceMuteStatus: () => storeVoice.voiceMuteStatus,
        },
        actions: {
            buttonTap: 'updateVoice',
        },
    },
    methods: {
        changeVoice() {
            wx.setStorageSync('voiceMuteStatus', !storeVoice.voiceMuteStatus);
            //可以直接这样调用updateVoice方法
            this.buttonTap(!storeVoice.voiceMuteStatus);
        },
    }
})

三、引申知识

1.MobX Store在组件Component和页面Page的使用方法不同

  官方示例:

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

Page({
  data: {
    someData: "...",
  },
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["numA", "numB", "sum"],
      actions: ["update"],
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
  myMethod() {
    this.data.sum; // 来自于 MobX store 的字段
  },
});

2.部分更新

  如果只是更新对象中的一部分(子字段),是不会引发界面变化的!例如:

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ["someObject"],
  },
});

如果尝试在 store 中:

this.someObject.someField = "xxx";

这样是不会触发界面更新的。请考虑改成:文章来源地址https://www.toymoban.com/news/detail-502565.html

this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });

3.更详细的请移步:

GitHub - wechat-miniprogram/mobx-miniprogram-bindings: 小程序的 MobX 绑定辅助库小程序的 MobX 绑定辅助库. Contribute to wechat-miniprogram/mobx-miniprogram-bindings development by creating an account on GitHub.https://github.com/wechat-miniprogram/mobx-miniprogram-bindings

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

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

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

相关文章

  • 微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理

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

    2024年02月05日
    浏览(43)
  • 微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)

     注意:下载完成后,需要删除 miniprogram_npm 目录后,重新构建 npm。 注意:ts编写的话,方法中使用this,需要在参数中定义this: any,否则会提示错误 引入onLoad()方法中引入createStoreBindings将store上的方法和属性绑定到页面中 在unOnLoad()方法中销毁destroyStoreBindings() 页面中使用:

    2024年02月16日
    浏览(51)
  • 小程序MobX创建store并实现全局数据共享

    没有package.json文件输入 npm init -y 初始化一下,初始化一个包管理 npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 .js文件 此时可以在页面中用{{}}使用store中的数据 使用store中的action方法 页面绑定一个方法,并且使用 data-* 进行传参 在js中使用 打印 点击之后就可以是页面

    2024年02月16日
    浏览(42)
  • React中使用mobx管理状态数据使用样例

    MobX 是一个身经百战的库,它通过运用透明的函数式响应编程(Transparent Functional Reactive Programming,TFRP)使状态管理变得简单和可扩展。官网地址:关于 MobX | MobX中文文档 | MobX中文网 mobx-react-lite是一个mobx和react建立链接的依赖库,也必须安装才可以使用 并使用store/index.js统一

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

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

    2024年02月15日
    浏览(38)
  • 微信小程序 全局配置||微信小程序 页面配置||微信小程序 sitemap配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含了部分常用配置选项的 app.json : 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配

    2024年02月01日
    浏览(47)
  • 微信小程序全局配置

    小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下: ① pages 记录当前小程序所有页面的存放路径 ② window 全局设置小程序窗口的外观 ③ tabBar 设置小程序底部的 tabBar 效果 ④ style 是否启用新版的组件样式  设置步骤:app.json - window - navigationBarTitle

    2024年04月17日
    浏览(38)
  • 微信小程序全局配置详解

    登录网址 https://mp.weixin.qq.com/ 注册网址 https://mp.weixin.qq.com/cgi-bin/wx?token=lang=zh_CN 下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 描述整体的app app.js 小程序逻辑 app.json 小程序公共配置 app.wxss 小程序公共样式表 描述各自页面的page 为了方便开发者减少配置项,

    2024年02月13日
    浏览(47)
  • 微信小程序全局数据共享

    全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。 在小程序中,可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享mobx-miniprogram用来创建Store实例对象 mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用  npm install --s

    2024年02月11日
    浏览(58)
  • 微信小程序 使用全局变量

    微信小程序里面有个 app.js ,我们可以在这个里面设置全局变量, 全局变量的定义:  globalData: {         userInfo: null,         tempFilePathslist: []     }  全局变量的获取: 在 app.js 文件中,直接使用,如: var gettempFilePathslist = this.globalData.tempFilePathslist 在 其他非app

    2024年02月02日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包