varHarrie / vuex-action

:hammer: Utilities for vuex to easily create and manage actions.

vuex-action

Utilities for vuex to easily create and manage actions.

• Allow you to create untyped action
• Support for Promise
• Work with vue@1 and vue@2

Installation

  npm install --save vuex-action

API

  import {createAction, createActions} from 'vuex-action'

createAction(type?: string, payloadHandler?: () => any | Promise)

It creates an action, and the action type will generated by uuidV4() if not specified.

createActions(prefix?: string, payloadHandlers: Array | Object)

Similarly, creates a lot of actions.

Usage

For complete examples, see examples

  // Create an action
  const increment = createAction('ACTION_TYPE')
  // Or
  const increment = createAction()

With normal function:

  // PayloadHandler allows you to customize the payload
  const add = createAction((num) => num || 1)
  // Therefore
  store.dispatch('add') // + 1
  store.dispatch('add', 5) // + 5

With Promise:

  // Here is a function to fetch a user
  const fetchUserApi = function (name) {
    return Promise.resolve({username: name})
  }
  // Return a Promise
  const fetchUser = createAction((name) => fetchUserApi(name))
  store.dispatch('fetchUser', 'Harrie') // payload = {username: 'Harrie'}

Or create actions together:

// use `createActions` instance of `createAction`
const actions = createActions([
  'increment',
  {
    add: (num) => num || 1,
    fetchUser: (name) => fetchUserApi(name)
  }
])

The store:

  const store = new Vuex.Store({
    state: {
      count: 0,
      user: null
    },
    mutations: {
      // Just make it as a type
      [increment] (state, num) {
        state.count += num
      },
      [fetchUser] (state, user) {
        state.user = user
      }
    },
    actions: {
      increment,
      fetchUser
    }
  })

Inspired by

• redux-act by pauldijou