joonstore

1.0.0 • Public • Published

JoonStore

一个全局事件总线和全局数据共享库

A global event bus and global data sharing library

设计灵感(Design inspiration)

专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,多个组件中的共享状态的管理(读/写),且适用于任意组件间的通信

A Vue plug-in that specifically implements centralized state (data) management in Vue, the management of shared state (read/write) in multiple components, and is suitable for communication between any component

coderwhy 说过:对于数据进行优秀的管理是你不写出屎山的前提

Coderwhy said: Good management of data is a prerequisite for you not to write a mountain of

1.如何使用(How to use)

npm install joonstore

2.用法演示(Usage demonstration)

2.1 事件总线(EventBus)

  • 监听和触发测试(Listen and trigger tests)

    const changename = (arg) => {
      console.log('他改名字了,传递的参数是' + arg);
    };
    
    eventbus.on('changename', changename);
    
    setTimeout(() => {
      eventbus.emit('changename', ['Joon', 'Thomas']);
    }, 3000);
  • 取消监听测试(Cancel the listening test)

    const changename = (arg) => {
      console.log('他改名字了,传递的参数是' + arg);
    };
    
    eventbus.on('changename', changename);
    eventbus.off('changename', changename);
    
    setTimeout(() => {
      eventbus.emit('changename', ['Joon', 'Thomas']);
    }, 3000);
  • Once 方法(Once method)

    const changename = (arg) => {
      console.log('他改名字了,传递的参数是' + arg);
    };
    
    eventbus.once('changename', changename);
    
    // 触发一:
    setTimeout(() => {
      eventbus.emit('changename', ['Joon', 'Thomas']);
    }, 3000);
    // 触发二:
    setTimeout(() => {
      eventbus.emit('changename', ['Joon1', 'Thomas1']);
    }, 4000);
  • Clear 方法 (Clear method)

    const changename = (arg) => {
      console.log('他改名字了,传递的参数是' + arg);
    };
    
    eventbus.once('changename', changename);
    eventbus.clear();
    
    // 触发一:
    setTimeout(() => {
      eventbus.emit('changename', ['Joon', 'Thomas']);
    }, 3000);
    // 触发二:
    setTimeout(() => {
      eventbus.emit('changename', ['Joon1', 'Thomas1']);
    }, 4000);
  • Hasevent 方法 (Hasevent method)

    const changename = (arg) => {
      console.log('他改名字了,传递的参数是' + arg);
    };
    
    eventbus.once('changename', changename);
    
    console.log(eventbus.hasEvent('changename'));

2.2 事件共享(EventStore)

tips:我们建议您在使用监听器监听数据时使用公共函数对其进行处理,否则可能会出现取消不掉的情况!

tips:We recommend that you use public functions to process data when listening to data using the listener, otherwise it may not be canceled!

使用步骤:

  • 引入库

    Ingest libraries

  • 格式化数据(我们建议您按照Demo去格式化数据)

    Format data (we recommend that you follow the demo to format data)

  • 监听(Snoop test)

    const eventhandelfunction = (newValue) => {
      console.log('监听到', newValue);
    };
    eventStore.onState('name', eventhandelfunction);
    setTimeout(() => {
      eventStore.setState('name', 'wangfeng1');
    }, 2000);
  • 多个数据监听(Multiple data listeners)

    const eventhandelfunction = (newValue) => {
      console.log('监听到', newValue);
    };
    eventStore.onStates(['name', 'skill'], eventhandelfunction);
    setTimeout(() => {
      eventStore.setState('skill', ['1', '2', '3', '4']);
    }, 2000);
    setTimeout(() => {
      eventStore.setState('name', 'Joon');
    }, 4000);
  • 取消监听(Cancel listening)

    const eventhandelfunction = (newValue) => {
      console.log('监听到', newValue);
    };
    eventStore.onState('name', eventhandelfunction);
    eventStore.offState('name', eventhandelfunction);
    setTimeout(() => {
      eventStore.setState('name', 'wangfeng1');
    }, 2000);
  • 多个数据监听取消(Multiple data listeners canceled)

    const eventhandelfunction = (newValue) => {
      console.log('监听到', newValue);
    };
    eventStore.onStates(['name', 'skill'], eventhandelfunction);
    eventStore.offStates(['name', 'skill'], eventhandelfunction);
    setTimeout(() => {
      eventStore.setState('skill', ['1', '2', '3', '4']);
    }, 2000);
  • Dispatch

    const payload = {
      success: '你成功了',
    };
    const info = {
      name: 'JoonStore',
      state: 'dev',
    };
    eventStore.dispatch('fetchGetPersongInfoForyou', payload);
    eventStore.dispatch('changeStatedata', info);
    console.log(eventStore.state);

Readme

Keywords

none

Package Sidebar

Install

npm i joonstore

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

19.4 kB

Total Files

8

Last publish

Collaborators

  • wang405