首页 > 网络编程 > JavaScript > javascript技巧 > 小程序全局状态管理

微信小程序实现全局状态管理的方法整理

2023-06-06 09:59:59 作者：业务崽

已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下

一、前言

在本文开始前请大家先想想在微信小程序中如果要做到全局状态共享有几种实现方式？

在这里给大家列举几种目前已知的方式：

globalData

本地缓存

mobx-miniprogram

westore

globalData和缓存应该是大家比较熟悉的，但这二者会随着项目的不断迭代逐渐变的混乱和不易维护。

所以针对此种情况mobx-miniprogram和westore应运而生。因前段时间公司项目刚好用到了mobx-miniprogram，所以借着公司的业务场景本文就展开讲一讲mobx-miniprogram，看看mobx-miniprogram是如何实现的小程序的全局状态管理。

如理解有误，欢迎评论纠正~

二、使用

mobx-miniprogram 的功能其实非常纯粹与简单，就是创建一个 store。但将 store 的数据映射到页面或组件时，就需要 mobx-miniprogram-bindings 库，它类似 react-redux，用于连接 store 与页面/组件的桥梁。

官方代码片段：代码片段

第一步：安装包文件

npm install --save mobx-miniprogram mobx-miniprogram-bindings
yarn add mobx-miniprogram mobx-miniprogram-bindings

第二步：构建npm

微信开发者工具---> 工具---> 构建npm

第三步：创建MobX Store

新建一个js文件，这里我们以购物车为例。

我们需全局共享购物车内的商品的状态、数量，做到一处修改全局变化。

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

从 mobx-miniprogram 包中导入 observable 和 action 两个方法。

observable: 用于创建 store 的实例对象
action: 用于包裹修改 store 数据的函数

// 创建实例对象
export const chat = observable({
    // 定义两个全局参数
    chatList: [], // 购物车商品
    totalPrice: 0, // 购物车商品总价
    // 初始化购物车
    initChat: action(function (list) {
        this.chatList = list
    }),
    // 修改价格
    setPrice: action(function (price) {
        this.totalPrice = price
    }),
})

第四步使用、更新store

store的应用，在page和component中是两种不同的方式

page

在page页面使用，我们需要用到 mobx-miniprogram-bindings 用于连接 store 与page页面

// 从 mobx-miniprogram-bindings 包中导入 `createStoreBindings` 方法
import { createStoreBindings } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Page({
   // onLoad 生命周期钩子中使用createStoreBindings，把指定 store 中的数据字段和更新函数映射到当前页面
    onLoad() {
        this.chatStore = createStoreBindings(this, {
          store: chat,
          fields: ['chatList', 'totalPrice'],
          actions: ['initChat']
        })
      },
      // 
      fu() {
        let chat = [
            {
                name: 'XXXX',
                price: '111'
            },
            {
                name: 'XXXX',
                price: '111'
            }
        ]
        this.initChat(chat)
      },
      // 页面卸载时,销毁当前页面的 store 绑定
      onUnload() {
        this.chatStore.destroyStoreBindings();
      }
    })

createStoreBindings 方法调用会返回一个包含 updateStoreBindings，destroyStoreBindings 两个函数的对象，并且赋值给了当前页面实例的 storeBindings 属性。

所以，当页面卸载（onUnload）时，调用 destroyStoreBindings 销毁当前页面的 store 绑定，避免造成内存泄露

在组件中使用、更新 store

与在页面使用 store 方式不同，在组件中要结合 behaviors（类似 Vue 中的混入）方式。

从 mobx-miniprogram-bindings 包中导入 storeBindingsBehavior 方法，并在组件选项中定义 storeBindings 字段。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Component({
   behaviors: [storeBindingsBehavior],
   storeBindings: {
      store: chat,
      fields: ['totalPrice'],
      actions: ['setPrice']
   }，
   methods: {
     fn() {
       this.setPrice(666)
     }
   }
})

也可以把 storeBindings 设置为一个数组，这样可以同时绑定多个 store

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      /* 绑定配置 1 */
    },
    {
      /* 绑定配置 2 */
    },
  ],
});

三、延迟更新与立即更新

为了提升性能，在 store 中的字段被更新后，并不会立刻同步更新到 this.data 上，而是等到下个 wx.nextTick 调用时才更新。 这样可以显著减少 setData 的调用次数。

如果需要立刻更新，可以调用：

this.updateStoreBindings() 在组件中
this.storeBindings.updateStoreBindings() 在页面中

this.setPrice(666)
this.storeBindings.updateStoreBindings()
console.log(this.data.totalPrice)

四、store 划分模块

随着项目越大，功能越丰富，项目模块的状态也越多，为了防止在一个 store 中堆积其他模块的状态，可根据功能模块或职责划分多个 store。

比如在 store 目录下划分以下模块：

userStore.js
cartStore.js
orderStore.js

页面或组件中需要使用和更新哪些 store 模块的状态，就导入指定的 store 模块，作为 store 字段传递给 createStoreBindings 或 storeBindingsBehavior 即可。

    createStoreBindings(this, {store: xxx})
    storeBindings: {
      store: xxx,
    }

以上就是微信小程序实现全局状态管理的方法整理的详细内容，更多关于小程序全局状态管理的资料请关注脚本之家其它相关文章！