小程序的状态管理

描述

小程序状态管理：
方案一：app.js->globalData:{}->getApp().globalData.name；致命的缺点：数据不是响应式。
其它方案：目前没有；GitHub上其它库(耦合度太高、后来者不好维护、有改变可能全部都要改)。

解决方案

依赖coderwhy老师的库 - hy-event-store，可自行在github上搜索。

介绍

hy-event-store：一个基于事件的全局状态管理工具，可以在Vue、React、小程序等任何地方使用。

1.npm安装依赖

npm install hy-event-store

2.构建npm

左上角->工具->构建 npm

3.创建store文件夹，创建文件index.js 和 ranking-store.js 并进行封装

// index.js
import { rankingStore } from './ranking-store'

export {
  rankingStore
}

// ranking-store.js
import { HYEventStore } from 'hy-event-store'

const rankingStore = new HYEventStore({
  state: {
    hotRanking: {}
  },
  actions: {
      getRankingDataAction(ctx) {
      }
  }
})

export {
  rankingStore
}

4.其它文件引用

// xx.js
import { rankingStore } from '../../store/index'

// 发起共享数据的请求
rankingStore.dispatch("getRankingDataAction")

// 从store获取共享的数据
rankingStore.onState("hotRanking", (res) => {
    if (!res.tracks) return
    const recommendSongs = res.tracks.slice(0, 6)
    this.setData({ recommendSongs })
})