@ezy/vue-makina

Vue bindings for Makina

Installation

npm i @ezy/vue-makina

Example

counter.ts

import { createBase, Filterables } from '@ezy/makina';

class Counter extends createBase()<number> {

  constructor(initialState = 0) {
    super(initialState);
  }

  public get display() {
    return `Times clicked: ${this.state}`;
  }

  public increment() {
    this.commit('increment', this.state + 1);
  }

  public decrement() {
    this.commit('decrement', this.state - 1);
  }
}

const counter: Filterables<Counter> = Counter.create();

export default counter;

index.ts (for Vue 3)

import { createApp } from "vue"
import VueMakina from "@ezy/vue-makina"
import App from './App.vue'
import counter from "./counter"

const app = createApp(App)

app.use(VueMakina)

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $counter: typeof counter
  }
}

app.config.globalProperties.$counter = counter;

...

index.ts (for Vue 2)

import Vue from "vue"
import VueMakina from "@ezy/vue-makina"
import counter from "./counter"

Vue.use(VueMakina)

declare module 'vue/types/vue' {
  interface Vue {
    $counter: typeof counter
  }
}

Vue.prototype.$counter = counter;

...

counter is now available in every component as $counter.

Counter.vue

<template>
  <div>
    <p>{{ $counter.display }}</p>

    <button v-on:click="$counter.increment()">+</button>
    <button v-on:click="$counter.decrement()">-</button>
  </div>
</template>

<script lang="ts">
  export default {};
</script>

On mutation

Vue being based on mutation, you will pretty quickly run into mutating your app state directly from your components, which destroy the entire point of having a state machine.

to avoid that kind of issues please consider to freeze the state of your state machines, see here.

Links

Reference

Makina