createViewChannelStore<T, R, A>

STORE CREATOR

Creates a store containing the provided ViewChannel from @uiloos/core, and subscribes to that ViewChannel. This way each time the ViewChannel is changed your component re-renders.

Since 1.4.0

Signature

Parameters

Returns

An Alpine.js store

Examples

A. Showing a success and error action

This example shows the ViewChannel used as a flash message center.

In the example the store is configured with the optional "actions" option and has "success" and "error" methods

First register the store with alpine:

import Alpine from 'alpinejs';
import { createViewChannelStore } from '@uiloos/alpine'; 

const flashMessageChannel = new ViewChannel();

const flashMessageStore = createViewChannelStore({
  viewChannel: flashMessageChannel,
  actions: {
    success(text): void {
      flashMessageChannel.present({
        data: {
          id: Math.random(),
          text,
          type: 'success'
        },
        priority: 2,
        autoDismiss: {
          duration: 2000,
          result: undefined
        }
      });
    },

    error(text): void {
      flashMessageChannel.present({
        data: {
          id: Math.random(),
          text,
          type: 'error'
        },
        priority: 1,
        autoDismiss: {
          duration: 5000,
          result: undefined
        }
      });
    }
  }
});

Alpine.store('flashMessages', flashMessageStore);
Alpine.start();

Now you can use the flashMessages store in your HTML like this:

<div x-data>
  <ul>
    <template x-for="view in $store.flashMessages.viewChannel().views :key="view.data.id"">
      <li>
        <span x-text="view.data.text"></span>
        <button @click="view.dismiss('DISMISSED')">dismiss</span>
      </li>
    </template>
  </ul>

  <button @click="$store.flashMessages.success('Good job!')">Success<button>
  <button @click="$store.flashMessages.error('Something went wrong!')">Error<button>
  <button @click="$store.flashMessages.viewChannel().dismissAll('CLEARING HOUSE')">Clear all<button>
</div>