Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/varharrie/vuex-action
:hammer: Utilities for vuex to easily create and manage actions.
https://github.com/varharrie/vuex-action
vuejs vuejs2 vuex vuex-action
Last synced: 17 days ago
JSON representation
:hammer: Utilities for vuex to easily create and manage actions.
- Host: GitHub
- URL: https://github.com/varharrie/vuex-action
- Owner: varHarrie
- License: mit
- Created: 2016-11-26T01:05:23.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-14T03:52:40.000Z (over 7 years ago)
- Last Synced: 2024-10-12T08:50:49.630Z (about 1 month ago)
- Topics: vuejs, vuejs2, vuex, vuex-action
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 26
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install --save vuex-action
```
## API
```javascript
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](https://github.com/varHarrie/vuex-action/tree/master/examples)
```javascript
// Create an action
const increment = createAction('ACTION_TYPE')
// Or
const increment = createAction()
```
With normal function:
```javascript
// 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:
```javascript
// 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:
```javascript
// use `createActions` instance of `createAction`
const actions = createActions([
'increment',
{
add: (num) => num || 1,
fetchUser: (name) => fetchUserApi(name)
}
])
```
The store:
```javascript
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](https://github.com/pauldijou/redux-act) by [pauldijou](https://github.com/pauldijou)