Type level helper to ensure type safety in Vuex
npm install vuex-type-helperType level helper to ensure type safety in Vuex.
``bashnpm
$ npm install vuex-type-helper
Example
ts
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 = {
half: state => state.count / 2
}
const mutations: DefineMutations = {
inc (state, { amount }) {
state.count += amount
},
reset(state) {
state.count = 0
}
}
const actions: DefineActions = {
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>({
type: 'incAsync',
amount: 1,
delay: 1000
})
store.dispatch>({
type: 'reset'
})
store.commit>({
type: 'inc',
amount: 1
})
store.commit>({
type: 'reset'
})
``MIT