vue-composition-global-subscription

A component to handle global events and data

Vue CompositionAPI に下記の機能を追加します

• pub sub タイプ グローバル イベントストリーム
• グローバル データ キャッシュ
• 非同期 API データ要求
• Storage API 等によるデータキャッシュ

CompositionAPI Reactive - Watch 機能を利用することにより 処理が非同期に行われUI処理が常に高速に保たれます

unSubscribe 機能により不要なデータキャッシュを削除し省メモリで動作します

Componentの外側からでも利用できます

Object 及び Primitive Value の両方を同様に扱えます

Installation

NPM

npm install vue-composition-global-subscription
# or
yarn add vue-composition-global-subscription

Event Stream

Create Subscription Store

最初にサブスクリプションストアを作成します First, Create Subscription Store

イベントメッセージの型と初期化関数を定義します

import useGlobalSubscription from 'vue-composition-global-subscription'

export interface IMessage{
  id : string
  text : string
  sender : string
}

export default function useMessageSubscription () {
  const initialData = () => { return { id: '', text: '', sender: '' } }
  const subscription = useGlobalSubscription<IMessage>(initialData)
  return {
    ...subscription
  }
}

Publish Message

サブスクリプションストアにイベントメッセージを通知します

import { defineComponent, reactive } from '@vue/composition-api'
import useMessageSubscription from 'src/compsitionStore/use-messageSubscription'

export default defineComponent({
  setup () {
    const state = reactive({
      newMessage: '',
      sender: ''
    })
    const { publish } = useMessageSubscription()
    const sendMessage = () => {
      const id = uid()
      publish('message', { id, text: state.newMessage, sender: state.sender })
      state.newMessage = ''
    }
    return {
      state,
      sendMessage
    }
  }
})

Subscribe Message

サブスクリプションストアからイベントメッセージを購読します アンマウント時に購読解除します

import { defineComponent, onBeforeUnmount, watch, ref } from '@vue/composition-api'
import useMessageSubscription, { IMessage } from 'src/compsitionStore/use-messageSubscription'

export default defineComponent({
  setup () {
    const messages = ref<Array<IMessage>>([])
    const { subscribe } = useMessageSubscription()
    const subscription = subscribe('message')
    watch(subscription.data, (value) => {
      messages.value.unshift(value)
    })
    onBeforeUnmount(() => {
      subscription.unSubscribe()
    })
    return {
      messages
    }
  }
})