vuelpers
v2.4.91
Published
Common javascript helpers methods for vue developers
Downloads
42
Readme
vuelpers
Extented vue helpers functions
Install
$ npm install vuelpers
or with yarn
$ yarn add vuelpers
Functions
1. createMutations
It's a vuex mutations generator which we use commonly to make changes in state like set a state value, push, update, delete a item in an array, reset the whole state. Using this package you don't have to write any mutations to make changes in state it has all the neccessary mutations to update state.
import { createMutations } from 'vuelpers'
const initialState = () => ({
loading: false,
counter: 0,
user: {
name: null
}
})
const mutations = {
...createMutations('SET')
// your other mutations
}
commit('SET', { loading: true })
commit('SET', { counter: c => c + 1 })
commit('SET', { 'user.name': 'John Doe' })
or in single object
commit('SET', {
loading: true,
counter: c => c + 1,
'user.name': 'John Doe'
})
Mutations Types
There is the list of mutation types
SET
- Set or change something to the state.RESET
- Reset the current state to initial state.PUSH
- Push items in an array.UNSHIFT
- Unshift items in an array.UPDATE
- Replace an array item with specified item.DELETE
- Delete an array item with specified id or any identifier.
Lets breakdown each of these. Consider this is our store.
import { createMutations } from 'vuelpers'
const initialState = () => ({
users: {
page: 1,
perPage: 20,
data: [
{
id: 1,
name: 'John doe',
email: '[email protected]'
},
{
id: 2,
name: 'David Davis',
email: null
}
],
},
books: [
{
id: 1,
name: 'Book Name'
}
]
})
const mutations = {
...createMutations('SET', 'RESET', 'PUSH', 'UNSHIFT', 'UPDATE', 'DELETE')
// your other mutations
}
RESET
commit('RESET', initialState())
PUSH
and UNSHIFT
let newUser = {
id: 3,
name: 'Thomas Rivers',
email: '[email protected]'
}
commit('PUSH', ['users.data', newUser])
// or like this
commit('PUSH', {
'user.data': newUser
})
// or multiple item at once
commit('PUSH', {
'user.data': [newUser, anotherUser]
})
// or (push or unshift) to multiple array at once
commit('PUSH', {
'books': newBook,
'user.data': [newUser, anotherUser],
})
UPDATE
commit('UPDATE', ['users.data', newUser, /* id - optional parameter to match by */])
| Methods | Returns | Descriptions |
| :---- | :---- | :---- |
| isEmpty(value:any)
| boolean
| Check if the given value is empty or not
| miniId(len?: number)
| string
| Generate a random id of maximum 10 characters length
| sleep(time?:number, unit?: string)
| Promise<any>
| Promise to await specific time