mini-stores

npm install mini-stores --save

import { Store } from 'mini-stores'

class GlobalStore extends Store {
  data = {
    title: '小程序多状态管理',
    language: 'zh_cn',
    userName: '李狗蛋',
    // 函数属性 — 自动计算，支持视图绑定
    description() {
      return `我是${this.userName}`
    },
    a: {
      b: {
        // 深层嵌套也支持函数属性
        c() {
          return this.language + this.description
        }
      }
    }
  }

  onChangeLang() {
    this.data.language = this.data.language === 'zh_cn' ? 'en_US' : 'zh_cn'
  }
}

export default new GlobalStore()

import globalStore from '../../stores/globalStore'
import indexStore from '../../stores/indexStore'

Page({
  data: {
    privateData: '私有状态'
  },
  onLoad() {
    // 绑定 Store，'$data' 为视图访问前缀
    indexStore.bind(this, '$index')
    globalStore.bind(this, '$data')
  },
  onUnload() {
    // 页面销毁时解绑（必须！）
    indexStore.unbind(this)
    globalStore.unbind(this)
  },
  handleChangeTitle() {
    // 直接赋值即触发渲染
    globalStore.data.title = '新标题'
  }
})

<view>
  <view>{{$index.title}}</view>
  <view>{{$data.language}}</view>
  <view>{{$data.description}}</view>
  <view>{{$data.a.b.c}}</view>
  <view>{{privateData}}</view>
</view>

import globalStore from '../../stores/globalStore'

Component({
  data: { privateData: '私有状态' },
  lifetimes: {
    ready() {
      globalStore.bind(this, '$data')
    },
    detached() {
      globalStore.unbind(this)
    }
  },
  methods: {
    handleChange() {
      globalStore.data.title = '组件中修改'
    }
  }
})

import globalStore from '../../stores/globalStore'

Page({
  onLoad() {
    globalStore.bind(this, '$data')
    // 监听单字段
    globalStore.watch.on('language', this.onLangChange)
    // 监听深层字段（点路径）
    globalStore.watch.on('a.b.c', this.onDeepChange)
  },
  onUnload() {
    globalStore.unbind(this)
    // 移除监听（必须！避免内存泄漏）
    globalStore.watch.off('language', this.onLangChange)
  },
  onLangChange(newValue, oldValue) {
    console.log('语言变更:', oldValue, '→', newValue)
  }
})