Skip to content
🔨 Utilities for vuex to easily create and manage actions.
Branch: master
Clone or download
Latest commit e123733 Mar 14, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples add examples Mar 14, 2017
src not need to handle arguments Mar 3, 2017
test
.babelrc add eslint and babel config Nov 26, 2016
.eslintrc
.gitignore add nyc Feb 28, 2017
LICENSE
README.md
package.json 1.2.1 Mar 14, 2017
webpack.config.js

README.md

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

You can’t perform that action at this time.