diox-vue v1.0.1

diox-vue

Official diox connector for VueJS.

Installation

yarn add diox-vue

Usage

// main.js
// --------------------------

import Vue from 'vuejs';
import Counter from './Counter.vue';

const app = new Vue({
  el: '#app',
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
});


// store.js
// --------------------------
import { Store } from 'diox';

const store = new Store();
store.register('my-module', {
  mutator: ({ state }, mutation) => {
    switch (mutation) {
      case 'INCREMENT':
        return {
          count: state.count + 1,
        };
      default:
        return { ...state || { count: 0 } };
    }
  },
});

export default store;


// Counter.vue
// --------------------------
<template>
  <div @click="doSomething">{{ count }}</div>
</template>

<script>
import Vue from 'vuejs';
import connect from 'diox-vue';
import store from './store.js';

const mapper = {
  'my-module': newState => ({ count: newState.count }),
};

export default connect(store, mapper)(({ dispatch }) => ({
  name: 'Counter',
  methods: {
    doSomething() {
      dispatch('my-module', 'incrementAsync');
    },
  },
}));
</script>

API documentation

You can find the full API documentation here

Contributing

See the Contribution guide

License

MIT

Copyright (c) Matthieu Jabbour.