diox
Search…
diox/connectors/vuejs
Official diox connector for VueJS.

Usage

1
// main.js
2
// --------------------------
3
4
import Vue from 'vuejs';
5
import Counter from './Counter.vue';
6
7
const app = new Vue({
8
el: '#app',
9
components: { Counter },
10
template: `
11
<div class="app">
12
<counter></counter>
13
</div>
14
`
15
});
16
17
18
// store.js
19
// --------------------------
20
import { Store } from 'diox';
21
22
const store = new Store();
23
store.register('my-module', {
24
state: {
25
count: 0,
26
},
27
mutations: {
28
INCREMENT: ({ state }) => {
29
return state.count + 1;
30
},
31
},
32
actions: {
33
incrementAsync: ({ mutate, hash }) => {
34
setTimeout(() => {
35
mutate(hash, INCREMENT);
36
}, 250);
37
},
38
},
39
});
40
41
export default store;
42
43
44
// Counter.vue
45
// --------------------------
46
<template>
47
<div @click="doSomething">{{ count }}</div>
48
</template>
49
50
<script>
51
import Vue from 'vuejs';
52
import useStore from 'diox/connectors/vue';
53
import store from './store.js';
54
55
const [useCombiner,, dispatch] = useStore(store);
56
57
export default useCombiner('my-module', {
58
name: 'Counter',
59
methods: {
60
doSomething() {
61
dispatch('my-module', 'incrementAsync');
62
},
63
},
64
}, (newState) => ({ count: newState.count }));
65
</script>
Copied!
Last modified 5mo ago
Copy link
Contents
Usage