# Djinn-state vue [![npm version](https://badge.fury.io/js/djinn-state-vue.svg)](https://badge.fury.io/js/djinn-state-vue) [![Build Status](https://travis-ci.com/djinn-state/djinn-state-vue.svg?branch=master)](https://travis-ci.com/djinn-state/djinn-state-vue) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/aab8942cccbf48a3ad13f77a505f8dd0)](https://www.codacy.com/app/djinn-state/djinn-state-vue?utm_source=github.com&utm_medium=referral&utm_content=djinn-state/djinn-state-vue&utm_campaign=Badge_Grade) [![Codacy Badge](https://api.codacy.com/project/badge/Coverage/aab8942cccbf48a3ad13f77a505f8dd0)](https://www.codacy.com/app/djinn-state/djinn-state-vue?utm_source=github.com&utm_medium=referral&utm_content=djinn-state/djinn-state-react&utm_campaign=Badge_Coverage) [![](https://img.shields.io/david/djinn-state/djinn-state-vue.svg)](https://github.com/djinn-state/djinn-state-vue) [![](https://img.shields.io/npm/dw/djinn-state-vue.svg)](https://www.npmjs.com/package/djinn-state-vue) [![](https://img.shields.io/bundlephobia/minzip/djinn-state-vue.svg)](https://www.npmjs.com/package/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](https://github.com/djinn-state/djinn-state-vue/tree/master/examples/todo-app) ## Using ```jsx harmony // 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` ```vue ```