An RxJS-only implementation of the AlertStore example during the Pinia demo from VueForge 2022

Alerts.store.ts

import { useObservable } from '@/helpers/rxjs-helper';
import { computed } from '@vue/composition-api';
import { BehaviorSubject } from 'rxjs';

interface Alert {
    id: number;
    text: string;
}

interface AlertsStoreState {
    alerts: Alert[];
}

// createState doesn't have a way for us to easily get the current value of the state, a flaw IMO.
// so lets just use BehaviorSubject :)
const _state = new BehaviorSubject<AlertsStoreState>({ alerts: [] });

// Actions on the store

const notify = (message: string) => {
    const currentState = _state.value;

    const newState: AlertsStoreState = {
        ...currentState,
        alerts: currentState.alerts.concat([{ id: 0, text: message }])
    };

    _state.next(newState);
};

const remove = (id: number) => {
    const currentState = _state.value;

    const newState: AlertsStoreState = {
        ...currentState,
        alerts: currentState.alerts.filter(a => a.id !== id)
    };

    _state.next(newState);
};

//
// START PUBLIC API
//

// Composable, to access state from vue's reactivity system.

export const useAlerts = () => {
    const state = useObservable(_state);
    return {
        alerts: computed(() => state.value.alerts),
        notify,
        remove
    };
};