Getting Started

Vue Eagle Eye is an independent state manager, which once created, can be deployed at any location in all parts of the application without further ado.

npm install --save @webkrafters/vue-eagleeye

Creating the Vue Eagle Eye store

To obtain a fresh context store, just call the createEagleEye(...) function.

context.ts

import { createEagleEye } from '@webkrafters/vue-eagleeye';
const MyContext = createEagleEye({
    a: { b: { c: null, x: { y: { z: [ 2022 ] } } } }
});
export const useMyStream = MyContext.stream;
export default MyContext;

container.vue

<script lang="ts" setup>
    import { defineProps, onUpdated } from 'vue';
    import MyContext from './context';
    import Ui from './ui';
                            
    const props = definedProps<{ c : number }>();

    const ageInMinutes = computed (() => props.c ?? 0 );

    onUpdated(() => MyContext.store.setState({ c: ageInMinutes }));
</script>
<template>
    <Ui />
</tempate>

Joining the Vue Eagle Eye change stream

Vue Eagle Eye change stream is a reactive store whose data are automatically changing to reflect most recent changes affecting them.

It embodies the "set-it-and-forget-it" paradigm. Just set up a list of property paths to state slices to observe (see Selector Map). The context takes care of the rest.

The following shows how to join the Vue Eagle Eye stream.

We use the context's stream(...) property to obtain an active store exposing the context change stream to our consumer component.

Note: Please note: Streams must be joined from within the setup script.

constants.ts

export const selectorMap = { year: 'a.b.x.y.z[0]' };

Client1.vue

<script lang="ts" setup>
    import { useMyStream } from './context';
    import { SelectorMap } from './constants';

    const { data } = useMyStream( SelectorMap );

</script>
<template>
    <div>Year: {{ data.year }}</div>
</template>

Client2.vue

<script lang="ts" setup>
    import { watch } from 'vue';
    import { useMyStream } from './context';
    import { SelectorMap } from './constants';

    const { data, setState, resetState } = useMyStream( SelectorMap );

    const onChange = e => setState({
        a: { b: { x: { y: { z: { 0: e.target.value } } } } }
    });

    watch( data.year, () => data.year > 2049 && resetState([ 'a.b.c' ]);
</script>
<template>
    <div>Year: <input type="number" @change="onChange" /></div>
</template>

Ui.vue

<script setup lang="ts">
    import Client1 from './Client1';
    import Client2 from './Client2';
</script>
<template>
    <div>
        <Client1 />
        <Client2 />
    </div>
</template>

The Vue Eagle Eye runs decoupled from its embodying application, simply providing an active place for the application to accumulate, access, update and delete its various states as needed in ways that maintains immutability and integrity of state data. The following is a contrived snippet to demonstrate.

app.vue

<script>
    import type { Ref } from 'vue';

    const MILLIS_PER_MINUTE = 6e4;

    let numCreated = 0;

    const getNextBDayTimer = (
        e : { age : Ref<number> }
    ) => setTimeout(() => e.age++, MILLIS_PER_MINUTE );
</script>
<script setup lang="ts">
    import { onBeforeUnmount, ref, watch } from 'vue';
    import Container from './container';

    const testNumber = ++numCreated;

    const age = ref( 0 );

    let t = getNextBDayTimer({ age });

    watch( age, () => {
        clearTimeout( t );
        t = getNextBDayTimer({ age });
    } );

    onBeforeUnmount(() => clearTimeout( t ));
</script>
<template>
    <div>
        <h2>App instance #: {{ testNumber }}</H2>
        <Container :ageInMinutes="age" />
    </div>
</template>