Skip to content

egoist/zerotwo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

25 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

logo

NPM version NPM downloads CircleCI donate chat

Install

yarn add zerotwo

CDN: UNPKG | jsDelivr (available as window.zerotwo)

Usage

Edit egoist/zerotwo: todomvc

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.

connect

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')
})

createStore({ state, mutations, actions, getters, plugins })

state

Type: Function | object

Initial state.

mutations

Type: { [type: string]: Function }

Mutation handlers.

actions

Type: { [type: string]: Function }

Action handlers.

getters

Type: { [key: string]: Function }

Register getters on the store. The getter function receives the following arguments:

state,
getters

plugins

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).

store

store.commit(mutation, payload)

store.dispatch(action, payload)

store.replaceState(newState)

License

MIT ยฉ EGOIST

About

๐Ÿ˜ˆ Refined state containter for Vue.js

Topics

Resources

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published