Счётчик

Тот же счётчик, что и в React и Solid версиях. Файл триггера идентичен; меняется только компонент.

Триггер

src/triggers/counter.trigger.ts

import { createTrigger } from '@triggery/core';

export const counterTrigger = createTrigger<{
  events:  { increment: void; decrement: void };
  actions: { adjust: number };
}>({
  id: 'counter',
  events: ['increment', 'decrement'],
  handler({ event, actions }) {
    actions.adjust?.(event.name === 'increment' ? 1 : -1);
  },
});

Компонент

src/Counter.vue

<script setup lang="ts">
import { useAction, useEvent } from '@triggery/vue';
import { ref } from 'vue';
import { counterTrigger } from './triggers/counter.trigger';

const count = ref(0);

const inc = useEvent(counterTrigger, 'increment');
const dec = useEvent(counterTrigger, 'decrement');

useAction(counterTrigger, 'adjust', delta => {
  count.value += delta;
});
</script>

<template>
  <div>
    <button @click="dec()">−</button>
    <output>{{ count }}</output>
    <button @click="inc()">+</button>
  </div>
</template>

Vue-биндинг использует provide/inject для рантайма и onScopeDispose для очистки — те же гарантии жизненного цикла, что и у cleanup’а React useEffect.

См. также

Версия для React Тот же триггер, React-хуки.

Версия для Solid C createSignal.

Пайплайн уведомлений (Vue) Полный многокомпонентный сценарий.

Пакет @triggery/vue Справочник по хукам.