An event-based global state management tool for vue, react, mini-program, ect.

Overview

hy-event-store

An event-based global state management tool for vue, react, mini-program, etc.

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

设计灵感

在项目中找到一个更加方便快捷的数据共享方案:

  • 后续会完善文档和增加更多好用功能;
  • 欢迎star、issue、pull requests,会进行更多改变;

如何使用呢?

1、npm安装依赖

npm install hy-event-store

2、事件总线(event-bus)

const { HYEventBus } = require('hy-event-store')

const eventBus = new HYEventBus()

const whyCallback1 = (...payload) => {
  console.log("whyCallback1:", payload)
}

const whyCallback2 = (...payload) => {
  console.log("whyCallback1:", payload)
}

const lileiCallback1 = (...payload) => {
  console.log("lileiCallback1:", payload)
}

eventBus.on("why", whyCallback1)
eventBus.on("why", whyCallback2)
eventBus.on('lilei', lileiCallback1)
eventBus.once("why", (...payload) => {
  console.log("why once:", payload)
})

setTimeout(() => {
  eventBus.emit("why", "abc", "cba", "nba")
  eventBus.emit("lilei", "abc", "cba", "nba")
}, 1000);

setTimeout(() => {
  eventBus.off("why", whyCallback1)
  eventBus.off("lilei", lileiCallback1)
}, 2000);

setTimeout(() => {
  eventBus.emit("why")
  eventBus.emit("lilei")
}, 3000);

3、数据共享(event-store)

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

const eventStore = new HYEventStore({
  state: {
    name: "why",
    friends: ["abc", "cba", "nba"],
    banners: [],
    recommends: []
  },
  actions: {
    getHomeMultidata(ctx) {
      console.log(ctx)
      axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
        const banner = res.data.data.banner
        const recommend = res.data.data.recommend
        // 赋值
        ctx.banners = banner
        ctx.recommends = recommend
      })
    }
  }
})

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

eventStore.onState("friends", (value) => {
  console.log("监听friends:", value)
})

eventStore.onState("banners", (value) => {
  console.log("监听banners:", value)
})

eventStore.onState("recommends", (value) => {
  console.log("监听recommends", value)
})

// 数据变化
setTimeout(() => {
  eventStore.setState("name", "lilei")
  eventStore.setState("friends", ["kobe", "james"])
}, 1000);

eventStore.dispatch("getHomeMultidata")
You might also like...
🔍 Holmes is a 0 config, fast and elementary state orchestrator for React

React Holmes 🔍 - Elementary State Orchestrator for React 🔍 Holmes is a 0 config, fast and elementary state orchestrator for React. Holmes has a very

A tiny, reactive JavaScript library for structured state and tabular data.

A JavaScript library for structured state. Using plain old JavaScript objects to manage data gets old very quickly. It's error-prone, tricky to track

Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.
Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.

Heroku: http://maple-app.herokuapp.com/ npm: npm install maple.js Bower: bower install maple.js Maple is a seamless module that allows you to organise

Demo app for refine.dev integration, a react-based framework for rapid building of internal tools.

Demo app for refine.dev integration, a react-based framework for rapid building of internal tools.

Simple and elegant component-based UI library
Simple and elegant component-based UI library

Simple and elegant component-based UI library Custom components • Concise syntax • Simple API • Tiny Size Riot brings custom components to all modern

⚡️ Lightning-fast search for React and React Native applications, by Algolia.
⚡️ Lightning-fast search for React and React Native applications, by Algolia.

React InstantSearch is a library for building blazing fast search-as-you-type search UIs with Algolia. React InstantSearch is a React library that let

React ESI: Blazing-fast Server-Side Rendering for React and Next.js
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web.

☕️ Buy me a coffee react-pdf-highlighter react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web. It is

React-cursor-chat - A react component for cursor chat
React-cursor-chat - A react component for cursor chat

@yomo/react-cursor-chat 🧬 Introduction A react component for cursor chat Press

Comments
  • 小程序组件的方法中 this指向 state ,导致无法使用setDate

    小程序组件的方法中 this指向 state ,导致无法使用setDate

    你好: 在组件ready生命周期中,监听状态变化,回调函数中this指向 state,无法用于设置组件的data;

        lifetimes:{
            ready(){
                store.onState('playlist',this.playlistStore)
            },
        },
           methods: {
            playlistStore(value){
                if(this){
                    console.log(this);
                    this.setData({
                     tracks:value
                    })
                }
            }
        }
    

    1668858258767

    opened by zhangjianxin1983 2
  • 报错

    报错

    Error: the state does not contain your key at HYEventStore.onState (index.js:277) at Vi.onLoad (index.js? [sm]:62) at Vi. (VM845 WAService.js:2) at Vi.s.callPageLifeTime (VM845 WAService.js:2) at Ht (VM845 WAService.js:2) at VM845 WAService.js:2 at Jt (VM845 WAService.js:2) at a. (VM845 WAService.js:2) at te. (VM845 WAService.js:2) at te.emit (VM845 WAService.js:2)(env: Windows,mp,1.05.2112301; lib: 2.21.3)

    opened by 0602hjm 0
  • onState中的回调执行时间, 有时会比dispatch执行的函数更快

    onState中的回调执行时间, 有时会比dispatch执行的函数更快

    getRankMenuDetail(ctx,payload){ getSongMenuDetail(payload).then(res=>{ ctx.rankSongMenu = res.playlist console.log(res.playlist) }) }

    recommendStore.onState("rankSongMenu",(res)=>{ this.setData({showData:res}) })

    执行顺序正常是先执行第一个,然后是第二个, 但是当我多次点击的时候, 他们的执行顺序发生了变化

    opened by democheng-cz 0
Owner
添加我的wx: coderwhy001
null
A tiny state manager for React, Svelte, Vue and vanilla JS

dotto.x Dotto.x is a tiny state manager for React, Svelte, and vanilla JS. Lightweight. Core is less than 135 bytes (minified and gzipped). Zero depen

null 108 Nov 2, 2022
A reactive filesystem interface based on Vue 3 reactivity system.

A reactive filesystem interface based on Vue 3 reactivity system.

Guillaume Chau 37 Oct 8, 2022
Teaful - Tiny, easy and powerful React state management

Tiny, easy and powerful React state management library What advantages does it have? ✨ ?? ・Tiny: Less than 1kb package to manage your state in

Teaful 668 Dec 18, 2022
micro reactive state management - just for fun

effectus micro reactive state management - just for fun Install $ yarn add effectus Usage import { effect, signal } from 'effectus' const [name, set

Hector Zarco 1 Dec 7, 2021
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

appbase.io 4.7k Jan 4, 2023
qiankun项目实践和优化(React+Vue)

qiankun项目实践和优化(React+Vue) 前言 qiankun微服务,将多个不同技术栈的系统(React,Vue,Angular,jQuery)等聚合成一个系统,各个系统又能各自独立部署运行,适用于大型团队和大型前端项目。 实现功能: 引入多技术栈(React + Vue) 后台管理系统(

Rick 30 Oct 31, 2022
basic implementation of the Vue 3 reactivity engine - from scratch

Vue 3 Reactivity This material was created by Marc Backes in order to show how reactivity is solved in Vue 3. It contains a basic implementation of th

Marc Backes 13 Oct 6, 2022
Toy Level Reactivity like Vue 3.x

reactivity Reactivity like Vue 3.x Features Typescript JSX Support Components and Fragment Dependency-Collect Reactivity Reactive Object based on ES6

Hydrogen 4 Oct 17, 2022
Immutable state for React.js

react-cursor Immutable state for React.js react-cursor hello-world in a fiddle What is react-cursor Cursors are a tool for working with recursive or d

Dustin Getz 1k Dec 12, 2022
Centrally manage state for React applications with CSP

State Trooper Install npm npm install state-trooper Yarn yarn add state-trooper Example Usage Call StateTrooper.patrolRunLoop in your route handler/ma

Swipely 15 May 14, 2022