0.5.2 • Published 6 years ago

puex v0.5.2

Weekly downloads
11
License
MIT
Repository
github
Last release
6 years ago

puex

NPM version NPM downloads CircleCI donate

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

0.5.2

6 years ago

0.5.1

6 years ago

0.5.0

6 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago