fix(hooks): improve vuex interface

Author: u3u

src/useActions.ts

@@ -1,3 +1,4 @@
+import { mapActions } from 'vuex';
 import createVuexHelper, { Helper } from './util/helpers';
 
-export default createVuexHelper(Helper.Actions);
+export default createVuexHelper<typeof mapActions>(Helper.Actions);

src/useGetters.ts

@@ -1,3 +1,4 @@
+import { useGetters } from 'vuex';
 import createVuexHelper, { Helper } from './util/helpers';
 
-export default createVuexHelper(Helper.Getters);
+export default createVuexHelper<typeof useGetters>(Helper.Getters);

src/useMutations.ts

@@ -1,3 +1,4 @@
+import { mapMutations } from 'vuex';
 import createVuexHelper, { Helper } from './util/helpers';
 
-export default createVuexHelper(Helper.Mutations);
+export default createVuexHelper<typeof mapMutations>(Helper.Mutations);

src/useState.ts

@@ -1,3 +1,4 @@
+import { useState } from 'vuex';
 import createVuexHelper, { Helper } from './util/helpers';
 
-export default createVuexHelper(Helper.State);
+export default createVuexHelper<typeof useState>(Helper.State);

src/util/helpers.ts

@@ -1,5 +1,12 @@
-import { computed } from 'vue-function-api';
-import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+import { computed, Wrapper } from 'vue-function-api';
+import {
+  useState,
+  useGetters,
+  mapState,
+  mapGetters,
+  mapMutations,
+  mapActions,
+} from 'vuex';
 import { getRuntimeVM } from './runtime';
 
 export enum Helper {
@@ -9,13 +16,13 @@ export enum Helper {
   Actions,
 }
 
-function handleComputed(mappedFn: Function) {
+function handleComputed(mappedFn: Function): Wrapper<any> {
   // TypeError: Cannot read property '_modulesNamespaceMap' of undefined
   // You must get `runtimeVM` in real time in the calculation properties.
   return computed(() => mappedFn.call(getRuntimeVM()));
 }
 
-function handleMethods(mappedFn: Function) {
+function handleMethods<T>(mappedFn: Function): T {
   return mappedFn.bind(getRuntimeVM());
 }
 
@@ -26,17 +33,23 @@ const helpers = {
   [Helper.Actions]: { fn: mapActions, handler: handleMethods },
 };
 
-export default function createVuexHelper(h: Helper) {
+export type Helpers =
+  | typeof useState
+  | typeof useGetters
+  | typeof mapMutations
+  | typeof mapActions;
+
+export default function createVuexHelper<T extends Helpers>(h: Helper) {
   const helper = helpers[h];
 
   return ((...args) => {
     // @ts-ignore
-    const mapper = helper.fn(...args);
+    const mapper = (helper.fn as T)(...args);
     const dictionary = {};
     Object.keys(mapper).forEach((key) => {
-      dictionary[key] = helper.handler(mapper[key]);
+      dictionary[key] = helper.handler<typeof mapper>(mapper[key]);
     });
 
     return dictionary;
-  }) as typeof helper.fn;
+  }) as T;
 }

types/vuex/helpers.d.ts

@@ -0,0 +1,27 @@
+import * as Vuex from 'vuex';
+import { Wrapper } from 'vue-function-api';
+
+declare module 'vuex/types/helpers' {
+  type ComputedWrapper = Wrapper<any>;
+
+  interface MapperForState {
+    <S>(
+      map: Dictionary<(this: CustomVue, state: S, getters: any) => any>,
+    ): Dictionary<ComputedWrapper>;
+  }
+
+  interface MapperForStateWithNamespace {
+    <S>(
+      namespace: string,
+      map: Dictionary<(this: CustomVue, state: S, getters: any) => any>,
+    ): Dictionary<ComputedWrapper>;
+  }
+
+  export const useState: Mapper<ComputedWrapper> &
+    MapperWithNamespace<ComputedWrapper> &
+    MapperForState &
+    MapperForStateWithNamespace;
+
+  export const useGetters: Mapper<ComputedWrapper> &
+    MapperWithNamespace<ComputedWrapper>;
+}