Voir is an incredibly simple store for keeping your mutations separate from your view components in Vue.js
Minimal code required to add new action behavior
ES5 friendly api
Redux Devtool support
npm:
CDN:
< script src = " https://unpkg.com/voir@latest/voir.js " > < / script >
We're going to create a simple counter application.
Let's start by creating the state for our app.
var state = { counter : 0 } ;
Next let's focus on the types of mutations we want to perform on this state. In Voir we separate out mutations into their own functions:
function counterMutations ( state , action ) {
switch ( action . type ) {
case " increment " :
state . counter += 1
return ;
case " decrement " :
state . counter -= 1
return ;
case " change " :
state . counter = action . data . number ;
return ;
}
}
Great! Now lets put our mutations and state together in a store that can expose our state and the ability to change it to others.
var store = Voir . createStore ( state , [ counterMutations ] ) ;
it's easy to add more mutation handlers if we want them
var store = Voir . createStore ( state , [ counterMutations , otherMutationHandler , ... ] ) ;
Now lets connect our Vue instance to the store so that any actions that come from our application go to our mutators.
< div id = " demo " >
{{state.counter}} < button > + </ button > < button > - </ button > < button > Reset </ button >
</ div >
Vue . use ( Voir , { store : store } ) ;
var demo = new Vue ( {
el : ' #demo ' ,
data : {
state : store . state
}
} )
Dispatching actions in Voir is easy:
< div id = " demo " >
{{state.counter}}
< 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 >
Vue . use ( Voir , { store : store } ) ;
var demo = new Vue ( {
el : ' #demo ' ,
data : {
state : store . state
}
} )
Dispatching asynchronous in Voir is conventionally done by dispatching new actions. This encourages reuse and also isolated steps that can be observed easily in Redux DevTools (see below).
< div id = " demo " >
{{state.counter}}
< button v-on:click = " dispatch('increment') " > + </ button >
< button v-on:click = " dispatch('decrement') " > - </ button >
< button v-on:click = " dispatch('change',{number:0}) " > Reset </ button >
< button v-on:click = " dispatch('step') " > Step </ button >
</ div >
function counterMutations ( state , action , dispatch ) {
switch ( action . type ) {
case " increment " :
state . counter += 1
return ;
...
case " step " :
state . counter += 1
setTimeout ( function ( ) {
dispatch ( " increment:stepping first time " ) ;
setTimeout ( function ( ) {
dispatch ( " increment:stepping second time " ) ;
} , 1000 )
} , 1000 )
return ;
}
}
Notice how comments can be added to an action on dispatch, allowing better logging in Redux DevTools.
You may have scenerios that you desire to modify the store directly
store . dispatch ( " increment " ) ;
Voir currently has support for logging through Redux DevTools. For more instructions on installing your dev tools, checkout https://github.com/gaearon/redux-devtools
< html >
< head >
< script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js " > </ script >
< script src = " https://unpkg.com/voir@latest/voir.js " > </ script >
</ head >
< body >
< 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 >
< button v-on:click = " dispatch('step') " > Step </ button >
</ div >
</ body >
< script >
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 ;
case " step " :
state . counter += 1
setTimeout ( function ( ) {
dispatch ( " increment:stepping first time " ) ;
setTimeout ( function ( ) {
dispatch ( " increment:stepping second time " ) ;
} , 1000 )
} , 1000 )
return ;
}
}
var store = Voir . createStore ( { counter : 0 } , [ counterMutations ] ) ;
Vue . use ( Voir , { store : store } ) ;
var demo = new Vue ( {
el : ' #demo ' ,
data : {
state : store . state
}
} )
</ script >
</ html >
See this demo at: https://richardanaya.github.io/voir/demo.html
