vuex-type-helper
v1.3.1
Published
Type level helper to ensure type safety in Vuex
Downloads
7,837
Maintainers
Readme
Vuex Type Helper
Type level helper to ensure type safety in Vuex.
Installation
# npm
$ npm install vuex-type-helper
# yarn
$ yarn add vuex-type-helper
Example
import * as Vuex from 'vuex'
import { DefineGetters, DefineMutations, DefineActions, Dispatcher, Committer } from 'vuex-type-helper'
/**
* Declare module types
*/
export interface CounterState {
count: number
}
export interface CounterGetters {
// getterName: returnType
half: number
}
export interface CounterMutations {
// mutationName: mutationPayloadType
inc: {
amount: number
}
reset: void // having no payload
}
export interface CounterActions {
// actionName: actionPayloadType
incAsync: {
amount: number
delay: number
}
reset: void // having no payload
}
/**
* Implement the module
*/
const state: CounterState = {
count: 0
}
const getters: DefineGetters<CounterGetters, CounterState> = {
half: state => state.count / 2
}
const mutations: DefineMutations<CounterMutations, CounterState> = {
inc (state, { amount }) {
state.count += amount
},
reset(state) {
state.count = 0
}
}
const actions: DefineActions<CounterActions, CounterState, CounterMutations, CounterGetters> = {
incAsync ({ commit }, payload) {
setTimeout(() => {
commit('inc', payload)
}, payload.delay)
},
reset({ commit }) {
commit('reset')
}
}
/**
* Create a store as same as the ordinary way
*/
const store = new Vuex.Store({
state,
getters,
mutations,
actions
})
/**
* Annotate dispatch/commit type with declared actions/mutations type
*/
store.dispatch<Dispatcher<CounterActions>>({
type: 'incAsync',
amount: 1,
delay: 1000
})
store.dispatch<Dispatcher<CounterActions>>({
type: 'reset'
})
store.commit<Committer<CounterMutations>>({
type: 'inc',
amount: 1
})
store.commit<Committer<CounterMutations>>({
type: 'reset'
})
License
MIT