vuex-action
Utilities for vuex to easily create and manage actions.
- Allow you to create
untypedaction - Support for
Promise - Work with
vue@1andvue@2
Installation
npm install --save vuex-actionAPI
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) // + 5With 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
}
})