小程序实现数据共享方案之hy-event-store

最近刷到一个很强的库hy-event-store 刷了遍里面的源码 逻辑性和设计性非常强 后面有时间会针对它写一份博客 下面是该库的常用使用方法(可以在vue、react、小程序中使用) (该库的github中使用文档没有写全，故而写这一篇博客)

const {
    HYEventStore
} = require("hy-event-store")
const axios = require("axios")

const eventStore = new HYEventStore({
    // 存放共享的数据
    state: {
        name: "蓝海",
        banners: [],
        recommends: []
    },
    // 在这里可以发起网络请求
    actions: {
        // ctx => state对象 可以直接(ctx.name = “新名字”) 来进行修改数据，在这里的this是当前new出来的实例对象
        fetchData(ctx) {
            // 发送请求
            axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
                const {
                    banner,
                    recommend
                } = res.data.data
                // 赋值
                ctx.banners = banner
                ctx.recommends = recommend
            })
        }
    }

})

const fn = (value) => {
    console.log("监听name:", value)
}
// 单个数据监听
eventStore.onState("name", fn)

// 多个数据监听
eventStore.onStates(["name", "banners", "recommends"], (value) => {
    // 注意：如果当前name发生了改变 但是banners和recommends没有发生改变 那么banners和recommends会返回undefined
    console.log("监听多个:name:", value.name)
    console.log("监听多个:banners:", value.banners)
    console.log("监听多个:recommends:", value.recommends)
})

// 执行发起请求
eventStore.dispatch("fetchData")

setTimeout(() => {
    // 手动修改共享数据
    eventStore.setState("name", "新名字")
    // 注销监听 当当前页面进行销毁时需要把当前页面中的数据监听进行销毁
    eventStore.offState("name", fn)
    // eventStore.offStates
}, 3000)