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);