vuex-ts改造

Author: weizhanzhan

.env.development

@@ -1 +1 @@
-VUE_APP_BASE_API = 'http://111.231.59.56:5000/api'
+VUE_APP_BASE_API = 'http://qa.i4cloud.cn:40001'

.env.production

@@ -1 +1 @@
-VUE_APP_BASE_API = 'http://111.231.59.56:5000/api'
+VUE_APP_BASE_API = 'http://qa.i4cloud.cn:40001'

.eslintrc.js

@@ -3,10 +3,10 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/recommended',"plugin:vue/essential", "@vue/typescript",],
+  extends: ['plugin:vue/recommended',"plugin:vue/essential", "@vue/typescript"],
   rules: {
     // ts规则
-    // 'semicolon':[treu],
+    // // 'semicolon':[treu],
     // 'await-promise':true,
     // 'no-floating-promises': true,
     // 'arrow-parens':true,

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "vue-i18n.i18nPaths": "src\\assets\\lang"
+    "vue-i18n.i18nPaths": "src\\assets\\lang",
+    "vscode.tsc.compiler.alertTSConfigChanges": "never",
+    "vscode.tsc.compiler.alertOnError": "never"
 }

src/api/login.ts

@@ -1,20 +1,19 @@
 import request from '@/utils/request'
+// eslint-disable-next-line no-unused-vars
+import * as LoginInterface from '../interface/api/login'
+const mockNum = '/mock/89/api/'
 
-export function loginByUsername(username:string, password:string) {
-  const data = {
-    email: username,
-    password
-  }
+export const loginByUsername = (data:LoginInterface.LoginInfo):Promise<LoginInterface.LoginResponse> => {
   return request({
-    url: '/users/login',
+    url: mockNum + 'login',
     method: 'post',
     data
   })
 }
 
-export function getUserInfo() {
+export const getUserInfo = ():Promise<LoginInterface.UserInfo> => {
   return request({
-      url: '/current',
+      url: mockNum + 'userInfo',
       method: 'get'
   })
 }

src/components/HeaderBar/index.vue

@@ -3,13 +3,6 @@
   <header class="header">
     <div class="header-left">
       <module-menu />
-
-      <!-- <a-icon
-        class="trigger"
-        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
-        @click="changeCollapsed"
-      />
-      <bread-crumb class="head-bread" /> -->
     </div>
     <ul class="menu">
       <li class="user">

src/interface/api/login.ts

@@ -0,0 +1,16 @@
+export interface LoginInfo {
+  email:string
+	password:string
+}
+export interface LoginResponse {
+  access_token:string
+}
+
+export interface UserInfo{
+	id: string,
+	name: string
+	email: string
+	role: string
+	sex: number
+	avatar: string
+}

src/store/getters.ts

@@ -1,11 +1,20 @@
+/* eslint-disable no-unused-vars */
+import { State as UserState } from './modules/user'
+import { State as PermissionState } from './modules/permission'
+
+export interface State {
+  user:UserState
+  permission:PermissionState
+}
+
 const getters = {
-    user: (state:any) => state.user.user,
-    roles: (state:any) => state.user.roles,
-    addRoutes: (state:any) => state.permission.addRoutes,
-    routes: (state:any) => state.permission.routes,
-    moduleMenu: (state:any) => state.permission.moduleMenu,
-    activeModule: (state:any) => state.permission.activeModule,
-    activeModuleMenu: (state:any) => state.permission.activeModuleMenu
+  user: (state:State) => state.user.user,
+  roles: (state:State) => state.user.roles,
+  addRoutes: (state:State) => state.permission.addRoutes,
+  // routes: (state:permissionState) => state.permission.routes,
+  moduleMenu: (state:State) => state.permission.moduleMenu,
+  activeModule: (state:State) => state.permission.activeModule,
+  activeModuleMenu: (state:State) => state.permission.activeModuleMenu
 }
 
 export default getters

src/store/index.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import modules from './modules/index'
 import getters from './getters'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({

src/store/modules/permission.ts

@@ -2,7 +2,7 @@ import Layout from '../../components/Layout/index.vue'
 import moduleMenu from '../../config/router.config'
 const getComponent = require(`@/router/import_${process.env.NODE_ENV}`)
 
-interface PermissionState {
+export interface State {
   addRoutes:Array<ModuleMenuItem>
   moduleMenu:Array<ModuleMenu>
   activeModuleMenu:Array<ModuleMenuItem>
@@ -103,10 +103,10 @@ const permission = {
     activeModuleMenu: []
   },
   mutations: {
-    SET_ROUTES: (state: PermissionState, routes: Array<ModuleMenuItem>) => {
+    SET_ROUTES: (state: State, routes: Array<ModuleMenuItem>) => {
       state.addRoutes = routes
     },
-    SET_MODULE_MENU: (state: PermissionState, data: {
+    SET_MODULE_MENU: (state: State, data: {
       routes:Array<ModuleMenuItem>
       moduleName:string
     }) => {