Inferred types helper module for Vuex.(Required TypeScript2.8 or higher)
Why need TypeScript on Vuex?
refactor State schema @ examples/src/store/modules/counter.ts
interface State count: number name: string isRunningAutoIncrement: booleanconst state = count: 0 name: 'unknown' isRunningAutoIncrement: false
Let's change the above state as follows.
With vuex-aggretate, you can raise errors up to mapHelper on SFC.
interface State amount: number // here name: string isRunningAutoIncrement: booleanconst state = amount: 0 // here name: 'unknown' isRunningAutoIncrement: false
Usage
Wrap your module parts with unique namespace by vuex-aggregate provided APIs.
fromState
is for state,fromMutations
is for mutations,fromActions
is for actions,fromGetters
is for getters.
namespace
must to be match modulename.
// ______________________________________________________//// @ State const namespace = 'counter' interface State count: number name: string isRunningAutoIncrement: booleanconst state = count: 0 name: 'unknown' isRunningAutoIncrement: falseconst mapState = // ______________________________________________________//// @ Getters const _getters = : string return `my name is ` : string const flag = stateisRunningAutoIncrement return flag ? 'true' : 'false' : string return { return ` ` } : number return { return statecount ** amount } const getters mapGetters = // ______________________________________________________//// @ Mutations const mutations = : void statecount++ : void statecount-- : void statecount = count : void statename = name : void stateisRunningAutoIncrement = flag const commits mutationTypes mapMutations = // ______________________________________________________//// @ Actions const actions = async { await commits } async const flag = !stateisRunningAutoIncrement commits while true if !stateisRunningAutoIncrement break await commits const dispatches actionTypes mapActions =
vuex-aggregate assumed to use shallow modules.
Please specify namespaced: true
at module.
Finaly, declare VuexAggregate.use(store)
.
// ______________________________________________________//// @ ModuleFactory const moduleFactory = namespaced: true // Required state: getters mutations actions
// ______________________________________________________//// @ Store Vueconst store = ... modules: Counternamespace: Counter NestedModulenamespace: NestedModule VuexAggregate // Required