Bind VUEX with AXIOS to make it reusable, change function names to Enums.

Author: anotherKyleFrom1994

src/pages/activity/photos/Photos.ts

@@ -2,4 +2,6 @@ import { Component, Vue } from 'vue-property-decorator';
 import Feed from '@/components/activity/feed/Feed.vue';
 
 @Component({ components: { Feed } })
-export default class Photos extends Vue {};
+export default class Photos extends Vue {
+
+};

src/pages/generic/cta/Cta.ts

@@ -1,10 +1,12 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
+import { ActionType } from '@/plugins/store/modules/app';
+
 @Component({})
 export default class Cta extends Vue {
-  @namespace('home').Action('fetchImages') fetchImages!: Function;
+  @namespace('app').Action(ActionType.FETCH_IMAGES) fetchImages!: Function;
 
-  private hello() {
+  private hello () {
     this.fetchImages();
   }
 }

src/plugins/axios-handler/index.d.ts

@@ -1,70 +1,75 @@
-// 默认利用axios的cancelToken进行防重复提交。
-// 如需允许多个提交同时发出。则需要在请求配置config中增加 neverCancel 属性，并设置为true
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 import baseConfig from './config/axiosrc';
 
 // define request params that should be a key value pair
-interface Params<T> {
+export interface Params<T> {
   [key: string]: T;
 }
 
-function createInstance ( params?: Params<object>, timeout?: number ) {
-  if ( params !== undefined ) baseConfig.params = params;
-  if ( timeout !== undefined ) baseConfig.timeout = timeout;
+function createInstance (params?: Params<object>, timeout?: number): AxiosInstance {
+  if (params !== undefined) baseConfig.params = params;
+  if (timeout !== undefined) baseConfig.timeout = timeout;
 
-  const instance = axios.create( baseConfig );
-  requstInterceptor( instance );
-  responseInterceptor( instance );
+  const instance = axios.create(baseConfig);
+  requstInterceptor(instance);
+  responseInterceptor(instance);
 
   return instance;
 }
 
-function requstInterceptor ( instance: AxiosInstance ) {
-  instance.interceptors.request.use( ( config: AxiosRequestConfig ) => {
-    console.log( config );
+function requstInterceptor (instance: AxiosInstance): void {
+  instance.interceptors.request.use((config: AxiosRequestConfig) => {
+    console.log(config);
     return config;
-  } );
+  });
 }
 
-function responseInterceptor ( instance: AxiosInstance ) {
-  instance.interceptors.response.use( ( response: AxiosResponse ) => {
-    console.log( response );
+function responseInterceptor (instance: AxiosInstance): void {
+  instance.interceptors.response.use((response: AxiosResponse) => {
+    console.log(response);
     return response;
-  } );
+  });
 }
 
-function requestGet ( url: string, params?: Params<object> ) {
-  return createInstance( params )
-    .get( url )
-    .catch( ( error: Error ) => {
-      errorHandler( error );
-    } )
-    .finally( () => {
+function requestGet (url: string, params?: Params<object>): Promise<void | AxiosResponse<any>> {
+  return createInstance(params)
+    .get(url)
+    .catch((error: Error) => {
+      errorHandler(error);
+    })
+    .finally(() => {
       doFinally();
-    } );
+    });
 }
 
-function requestPost ( url: string, params?: Params<object> ) {
-  return createInstance( params )
-    .post( url )
-    .catch( ( error: Error ) => {
-      errorHandler( error );
-    } )
-    .finally( () => {
+function requestPost (url: string, params?: Params<object>): Promise<void | AxiosResponse<any>> {
+  return createInstance(params)
+    .post(url)
+    .catch((error: Error) => {
+      errorHandler(error);
+    })
+    .finally(() => {
       doFinally();
-    } );
+    });
 }
-function errorHandler ( error: Error ) {
-  console.log( error );
+
+function errorHandler (error: Error): void {
+  console.log(error);
 };
 
-function doFinally () {
-  console.log( 'finally' );
+function doFinally (): void {
+  console.log('finally');
 }
 
-const axiosHandler: any = {};
+export interface AxiosHandlerStatic {
+  requestGet (url: string, params?: Params<any>): Promise<void | AxiosResponse<any>>;
+  requestPost (url: string, params?: Params<any>): Promise<void | AxiosResponse<any>>;
+}
 
-axiosHandler.requestGet = requestGet;
-axiosHandler.requestPost = requestPost;
+const axiosHandler: AxiosHandlerStatic = {
+  requestGet: requestGet,
+  requestPost: requestPost
+};
 
+export { AxiosResponse };
 export default axiosHandler;

src/plugins/axios-handler/index.ts

@@ -3,14 +3,11 @@ import Vuex, { StoreOptions } from 'vuex';
 import app from './modules/app';
 import home from './modules/home';
 import activity from './modules/activity';
+
 // register VUEX
 Vue.use(Vuex);
 
-export interface State {
-  [key: string]: any
-}
-
-let opt: StoreOptions < any > = {
+let opt: StoreOptions<any> = {
   // strict mode
   strict: true,
 
@@ -21,10 +18,16 @@ let opt: StoreOptions < any > = {
   state: {
     user: 'user'
   },
+
   mutations: {},
   actions: {},
   getters: {}
 
 };
 
+export interface State<T> {
+  [key: string]: T;
+}
+
+export { Action, ActionContext, MutationTree, Mutation, Getter } from 'vuex';
 export default new Vuex.Store(opt);

src/plugins/store/index.ts

@@ -2,7 +2,6 @@ import { Store } from 'vuex';
 import { State } from '@/plugins/store';
 
 const actions = {
-
 };
 
 export default actions;

src/plugins/store/modules/activity/modules/actions.ts

@@ -6,8 +6,8 @@ export interface Category {
   to: string;
 }
 
-const getters: GetterTree < State, Getter < string, any > > = {
-  categories: (state: State) => {
+const getters: GetterTree<State<any>, Getter<string, any>> = {
+  categories: (state: State<any>) => {
     const categories: Category[] = [];
 
     for (const photo of state.photos) {
@@ -26,7 +26,7 @@ const getters: GetterTree < State, Getter < string, any > > = {
 
     return categories.sort().slice(0, 4);
   },
-  links: (state: State, getters: any) => {
+  links: (state: State<any>, getters: any) => {
     return state.items.concat(getters.categories);
   }
 };

src/plugins/store/modules/activity/modules/getters.ts

@@ -2,8 +2,8 @@ import { State } from '@/plugins/store';
 import { MutationTree, Mutation } from 'vuex';
 
 const mutations: MutationTree < Mutation < any > > = {
-  setDrawer: (state: State, payload: boolean) => (state.drawer = payload),
-  toggleDrawer: (state: State) => (state.drawer = !state.drawer)
+  setDrawer: (state: State<any>, payload: boolean) => (state.drawer = payload),
+  toggleDrawer: (state: State<any>) => (state.drawer = !state.drawer)
 };
 
 export default mutations;

src/plugins/store/modules/activity/modules/mutations.ts

@@ -1,24 +1,9 @@
 import { articles } from '@/data/articles';
 import { State } from '@/plugins/store';
 
-export interface Item {
-  [key: string]: string
-}
-
-let items: Item[] = [{
-    text: 'Home',
-    to: '/'
-  },
-  {
-    text: 'About',
-    href: '#about'
-  }
-];
-
-const state: State = {
+const state: State<any> = {
   photos: articles,
-  drawer: false,
-  items: items
+  sponsorId: ''
 };
 
 export default state;

src/plugins/store/modules/activity/modules/state.ts

@@ -1,7 +1,7 @@
-import state from './modules/state';
-import mutations from './modules/mutations';
-import actions from './modules/actions';
-import getters from './modules/getters';
+import state, { StateType } from './modules/state';
+import mutations, { MutationType } from './modules/mutations';
+import actions, { ActionType } from './modules/actions';
+import getters, { GetterType } from './modules/getters';
 
 const app = {
   namespaced: true, // 成為帶名稱空間的模組
@@ -11,4 +11,5 @@ const app = {
   getters: getters
 };
 
+export { StateType, MutationType, ActionType, GetterType };
 export default app;