yarn add zerotwo
CDN: UNPKG | jsDelivr (available as window.zerotwo
)
Create a store
first:
import Vue from 'vue'
import zerotwo, { createStore } from 'zerotwo'
Vue.use(zerotwo)
const store = createStore({
state: { count: 0 },
mutations: {
increment: state => state.count++
}
})
new Vue({
store,
render: h => h(App)
})
Then create your App
:
import { connect, state, mutation } from 'zerotwo'
// A "stateless" component
const Counter = {
props: ['count', 'increment'],
template: `<button @click="increment">{{ count }}</button>`
}
// Connect needed state and mutations to `Counter`
const App = {
template: '<counter />',
components: {
Counter: connect({
count: state(),
increment: mutation()
}, Counter)
}
}
export default App
It's almost the same as Vuex
but here's no mapState
mapMutations
etc.. Instead you use connect
to feed any needed data to your component as props.
import { state, getter, action, mutation } from 'zerotwo'
connect({
count: state(),
doubleCount: getter(),
increment: mutation(),
incrementAsync: action()
})
// To connect from a different name
// Just pass the name to the connect helpers like:
connect({
// state.thatCount -> this.count
count: state('thatCount')
})
Type: Function | object
Initial state.
Type: { [type: string]: Function }
Mutation handlers.
Type: { [type: string]: Function }
Action handlers.
Type: { [key: string]: Function }
Register getters on the store. The getter function receives the following arguments:
state,
getters
Type: Array<Function>
An array of plugin functions to be applied to the store. The plugin simply receives the store as the only argument and can either listen to mutations (for outbound data persistence, logging, or debugging) or dispatch mutations (for inbound data e.g. websockets or observables).
MIT © EGOIST