Newsworthy Presidential Mistakes

    vue-composition-global-subscription
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.19 • Public • Published

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

    Install

    npm i vue-composition-global-subscription

    DownloadsWeekly Downloads

    3

    Version

    0.1.19

    License

    MIT

    Unpacked Size

    12.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • simplise