JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.8/vue.js"></script>
<script src="https://unpkg.com/voir@latest/voir.js"></script>
<div id="demo">
<p>{{state.counter}}</p>
<button v-on:click="dispatch('increment')">+</button>
<button v-on:click="dispatch('decrement')">-</button>
<button v-on:click="dispatch('change',{number:0})">Reset</button>
</div>
JavaScript
function counterMutations(state,action,dispatch){
switch(action.type){
case "increment":
state.counter += 1
return;
case "decrement":
state.counter -= 1
return;
case "change":
state.counter = action.data.number;
return;
}
}
var store = Voir.createStore({ counter: 0 }, [counterMutations]);
Vue.use(Voir,{store:store});
var demo = new Vue({
el: '#demo',
data:{
state: store.state
}
})