puex

Features

• Small size, the goal is to have a 1kB state management library.
• Similar to Vuex
  • Dropped unnecessary features (for specific use cases).
  • Every developer that knows Vuex knows Puex already.
• vue-devtools: It just works™.

Install

yarn add puex

CDN: UNPKG | jsDelivr

Usage

Create store instance

// store.js
import Vue from 'vue'
import Puex from 'puex'

Vue.use(Puex)

const store = new Puex({
  state: {},
  mutations: {},
  actions: {},
  plugins: []
})

Bind store instance

In order to access store in every component:

import Vue from 'vue'
import store from './store'

// In your root Vue instance:
new Vue({
  store,
  render: h => h(YourApp)
})
// this.$store will be available in component

store

• store.state readonly
• store.mutations
• store.actions
• store.commit(type, payload)
• store.dispatch(type, payload)
• store.subscribe(subscriber)
• store.replaceState(newState)
• store.mapState(map)
• store.mapActions(map)
• store.mapMutations(map)

API

Constructor

const store = new Puex({ state, mutations, actions })

state

state is nothing special, it can be either an object or a function that returns an object, then you can access it via store.state which will be read-only, to replace root state you can use store.replaceState(newState) instead.

mutations

const mutations = {
  INCREMENT(state, amount = 1) {
    state.count += amount
  }
}

store.commit('INCREMENT', 10)

NOTE: You can only mutate state inside a mutation.

actions

const actions = {
  incrementAsync(store, id) {
    return getAmountByIdAsync(id).then(amount => {
      store.commit('INCREMENT', amount)
    })
  }
}

store.dispatch('incrementAsync', 42)

plugins

const loggerPlugin = store => {
  store.subscribe(mutation => {
    console.log(mutation)
  })
}

new Puex({
  plugins: [loggerPlugin]
})

store.subscribe(subscriber)

const unsubscribe = store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

store.replaceState(newState)

Replace root state.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

puex © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @_egoistlily