修改store模块导入

Author: kuangshp

package-lock.json

@@ -31,6 +31,7 @@
     "vuex-class": "^0.3.2"
   },
   "devDependencies": {
+    "@types/node": "^12.7.4",
     "@vue/cli-plugin-babel": "^3.0.1",
     "@vue/cli-plugin-typescript": "^3.0.1",
     "@vue/cli-service": "^3.0.1",

package.json

@@ -44,13 +44,13 @@ import {
 } from 'vuex-class';
 import { currentUser, authToken } from '@/config';
 import { storage } from '@/utils';
-import { IViewState } from '@/store/view';
+// import { IViewState } from '@/store/view';
 
 @Component({
   components: {},
 })
 export default class AppHeader extends Vue {
-  @State private viewStore!: IViewState;
+  // @State private viewStore!: IViewState;
   @Action('viewStore/toogleSidebar') private toogleSidebar!: () => void;
   private username: string = '';
 

src/components/app-header/AppHeader.vue

@@ -0,0 +1,10 @@
+import { $post } from '@/utils';
+
+class LoginService {
+  // 登录接口
+  public async login(postData: { name: string, password: string }): Promise<any> {
+    return await $post('/login', postData);
+  }
+}
+
+export default new LoginService();

src/servers/Login.ts

@@ -1,13 +1,26 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+// tslint:disable-next-line: no-var-requires
+const path = require('path');
+
 import { viewStore } from './view';
 Vue.use(Vuex);
 
-import user from './modules/user';
+/********************************自动导包 start********************************/
+const file = require.context('./modules', true, /\.ts/);
+const modules: { [propsName: string]: any } = {};
+file.keys().forEach((key: string) => {
+  const name = path.basename(key, '.ts');
+  modules[name] = file(key).default || file(key);
+});
+/********************************自动导包 end********************************/
+
+const debug = process.env.NODE_ENV !== 'production';
 
 export default new Vuex.Store({
+  strict: debug,
   modules: {
     viewStore,
-    user,
+    ...modules,
   },
 });

src/store/index.ts

@@ -0,0 +1,14 @@
+import LoginService from '@/servers/Login';
+import { errorCaptured } from '@/utils';
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    // 登录的接口
+    async loginApi(_: any, postData: { name: string, password: string }) {
+      return await errorCaptured(LoginService.login)(postData);
+    },
+  },
+};

src/store/modules/login.ts

@@ -4,7 +4,7 @@ import { axiosResult } from './axios-result';
  * 错误捕获的方法,使用方式errorCaptured(UserService.getAllUser)(getAllUser函数需要传递的参数)
  * @param func
  */
-export const errorCaptured = (func: () => void) => {
+export const errorCaptured = (func: (_?: any) => Promise<any>) => {
   return new Proxy(func, {
     async apply(target, thisBinding, args) {
       try {

src/utils/error-captured.ts

@@ -45,11 +45,13 @@
 <script lang="ts">
 import { Component, Vue, Provide } from 'vue-property-decorator';
 import { authToken, currentUser } from '@/config';
+import { Action } from 'vuex-class';
 import { storage } from '@/utils';
-import axios from 'axios';
 
 @Component({})
 export default class Login extends Vue {
+  @Action('login/loginApi') private loginApi!: (postData: { name: string, password: string }) => Promise<any>;
+
   private loginForm: { [propsName: string]: any } = {
     email: '',
     password: '',
@@ -58,7 +60,7 @@ export default class Login extends Vue {
     (this.$refs[formType] as any).validate(async (valid: boolean) => {
       if (valid) {
         const postData = { name: this.loginForm.email, password: this.loginForm.password };
-        const { code, result: { data: { token } }, message } = await axios.post('/login', postData);
+        const { code, result: { data: { token } }, message } = await this.loginApi(postData);
         if (code === 0) {
           // 设置本地存储
           storage.setItem(authToken, token);