djinn-state-vue

Djinn-state vue

Djinn-state helpers for vue

Install

npm npm i --save djinn-state djinn-state-vue

yarn yarn add djinn-state djinn-state-vue

Examples

• Todo app

Using

// djinn.js
import { Djinn, DjinnService } from 'djinn-state';
import { createDjinnConnector } from 'djinn-state-vue';

export const djinn = new Djinn();
export const connect = createDjinnConnector(djinn);


// CounterService.js
export class CounterService extends DjinnService {
  state = {
    count: 0,
  };
  
  decrement = () => {
    const count = this.state.count - 1;
    this.patch({ count });
  };
  
  increment = () => {
    const count = this.state.count + 1;
    this.patch({ count });
  };
}

// djinnServices.js
import { djinn } from './djinn';

djinn.register(CounterService);
djinn.start();

// main.js
import './djinnServices.js'

Counter.vue

<template>
    <div>
        <button @click="services.CounterService.decrement()">-</button>
        {{state.CounterService.count}}
        <button @click="services.CounterService.increment()">+</button>
    </div>
</template>

<script>
  import {connect} from './djinn';
  import {CounterService} from './CounterService';

  export default {
    name: 'Counter',
    mixins: [connect({CounterService})],
  };
</script>