mini-stores：小程序界的Vuex？支持跨平台，助力状态管理

前端

2023-09-16 02:25:15

随着小程序生态的不断完善，各平台小程序的开发体验也越来越成熟。但是，有一个痛点一直困扰着小程序开发者——缺乏官方实现的状态管理库。

对于使用过 Redux、Vuex、MobX 等状态管理库的前端小伙伴来说，状态管理的重要性不言而喻。它可以帮助我们轻松解决跨页面、跨组件的通信问题。

而 mini-stores，就是小程序界的一股清流。它是一个轻量级、高性能的小程序全局多状态管理库，支持微信、支付宝、钉钉、百度、字节、QQ、京东等主流小程序平台。

告别繁琐，拥抱优雅

使用 mini-stores，你可以轻松地将小程序的状态管理从繁琐的手工维护中解放出来。它提供了以下核心特性：

全局状态管理： 将小程序的全局状态集中管理，方便不同页面和组件之间的数据共享。
模块化设计： 将状态划分为一个个独立的模块，便于维护和复用。
数据响应式： 当状态发生变化时，所有订阅该状态的组件都会自动更新。
跨平台支持： 支持微信、支付宝、钉钉、百度、字节、QQ、京东等主流小程序平台，让你的代码一次编写，多端运行。

实例详解

为了更好地理解 mini-stores 的用法，我们来看一个简单的例子。

假设我们有一个小程序，包含两个页面：A 页面和 B 页面。A 页面需要向 B 页面传递一个变量 count。

使用传统的做法，我们需要在 A 页面中声明 count 变量，然后通过小程序的 navigateTo 方法传递到 B 页面。而在 B 页面，我们需要在 onLoad 生命周期函数中接收这个变量。

// A 页面
Page({
  data: {
    count: 0
  },
  onLoad() {
    // 省略其他代码
    wx.navigateTo({
      url: '/pages/b/b',
      success(res) {
        res.eventChannel.emit('acceptData', { count: this.data.count })
      }
    })
  }
})

// B 页面
Page({
  onLoad(options) {
    const { count } = options.eventChannel.data
    // 省略其他代码
  }
})

而使用 mini-stores，我们可以将 count 变量存储在全局状态中，并在 B 页面中直接订阅该状态。

// main.js
import store from './store'
App({
  store
})

// A 页面
Page({
  onLoad() {
    // 省略其他代码
    store.commit('setCount', 1)
  }
})

// B 页面
Page({
  onLoad() {
    store.subscribe('count', (count) => {
      // count 更新时执行回调函数
    })
  }
})