djinn-state-vue
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Djinn-state vue

npm version Build Status Codacy Badge Codacy Badge

Djinn-state helpers for vue

Install

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

yarn yarn add djinn-state djinn-state-vue

Examples

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>

Package Sidebar

Install

npm i djinn-state-vue

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

17 kB

Total Files

22

Last publish

Collaborators

  • gilmarsquinelato