Vuex can be strongly-typed by interface.
And you can use this with a very simple declaration.
Unlike existing projects, you can also strongly-typed the promise returned from dispatch.
This is an implementation for when the $store on vue can now be typed in the future.
npm install --save-dev vuex-typed/*
* Attention that it is annotated according to the type declared by the interface.
*/
import Vue from 'vue';
import Vuex from 'vuex';
import { ActionTree, GetterTree, MutationTree } from 'vuex-typed';
Vue.use(Vuex);
/*
* State
*/
export interface IState {
date: Date;
}
const state: IState = {
date: new Date()
};
/*
* Getters
*/
interface IGetters {
time: number;
}
const getters: GetterTree<IGetters, IState> = {
time: state => state.date.getTime()
};
/*
* Mutations
*/
interface IMutations {
setDate: Date;
}
const mutations: MutationTree<IMutations, IState> = {
setDate: (state, payload) => {
state.date = payload;
}
};
/*
* Actions
*/
interface IActions {
set: (payload: Date) => void;
diff: (payload: Date) => number;
now: () => Promise<number>;
}
const actions: ActionTree<IActions, IState, IMutations, IGetters> = {
set: ({ commit }, payload) => {
commit('setDate', payload);
},
diff: ({ getters }, payload) => {
return payload.getTime() - getters.time;
},
now: () => {
return new Promise(resolve =>
setTimeout(() => {
resolve(new Date().getTime());
}, 1000)
);
}
};
/*
* Export
*/
export default new Vuex.Store({
state,
getters,
mutations,
actions
});MIT