diox/connectors/vue

Official diox connector for Vue.

Usage

The useSubscription method allows you to subscribe to changes from a given module, and automatically handles component's reactivity. Returns the reduced state each time it changes.

useSubscription(moduleId: string, reducer?: (newState: any) => any): any

• moduleId Id of the module to subscribe to.

• reducer Optional state reducer. Allows you to transform the new state to get exactly what you need. Defaults to the identify function.

This connector is designed to be used with Vue 3's Composition API.

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

import { createApp } from 'vue';
import Counter from './Counter.vue';

createApp(Counter).mount('#app');


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

const store = new Store();
store.register('my-module', {
  state: {
    count: 0,
  },
  mutations: {
    INCREMENT: ({ state }) => {
      return state.count + 1;
    },
  },
  actions: {
    incrementAsync: ({ mutate, id }) => {
      setTimeout(() => {
        mutate(id, 'INCREMENT');
      }, 250);
    },
  },
});

export default store;


// Counter.vue
// --------------------------
<script setup>
import store from './store.js';
import connect from 'diox/connectors/vue';
const useSubscription = connect(store);

const count = useSubscription('my-module', (newState) => newState.count);

function doSomething() {
  store.dispatch('my-module', 'incrementAsync');
};
</script>

<template>
  <div @click="doSomething">{{ count }}</div>
</template>