From 2898a6362fee626c379fcc07dbae915c9fe6b980 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 17 Sep 2021 12:47:42 +0800
Subject: [PATCH] vuex

---
 src/App.vue                            |  3 ++
 src/api/index.ts                       |  2 +-
 src/{config => api}/interfaces/auth.ts |  0
 src/main.ts                            |  4 +--
 src/router/index.ts                    |  5 +--
 src/{config => router}/routers/auth.ts |  0
 src/store/index.ts                     | 46 ++++++++++++++++++++------
 src/store/modules/auth.ts              | 22 ++++++++++++
 src/types/auth.d.ts                    | 14 ++++----
 src/types/router.d.ts                  |  5 +--
 src/types/user.d.ts                    | 10 ++++++
 src/views/Auth/login.vue               |  6 ++--
 src/views/Home/index.vue               |  7 ++++
 13 files changed, 96 insertions(+), 28 deletions(-)
 rename src/{config => api}/interfaces/auth.ts (100%)
 rename src/{config => router}/routers/auth.ts (100%)
 create mode 100644 src/store/modules/auth.ts
 create mode 100644 src/types/user.d.ts

diff --git a/src/App.vue b/src/App.vue
index 25a1ace..e0fa93e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,9 @@
       <component :is="Component"></component>
     </keep-alive>
   </router-view>
+
+  <router-link to="/">Home</router-link> |
+  <router-link to="/auth/login">Login</router-link>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/api/index.ts b/src/api/index.ts
index 22afdf4..c76c5e8 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,4 +1,4 @@
-import auth from '@/config/interfaces/auth'
+import auth from '@/api/interfaces/auth'
 
 export {
     auth
diff --git a/src/config/interfaces/auth.ts b/src/api/interfaces/auth.ts
similarity index 100%
rename from src/config/interfaces/auth.ts
rename to src/api/interfaces/auth.ts
diff --git a/src/main.ts b/src/main.ts
index 256112a..c70ef32 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store, { key } from './store'
 
 const app = createApp(App)
 
-app.use(store)
+app.use(store, key)
 app.use(router)
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index 3fe019c..e2a3342 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,4 @@
-import auth from '@/config/routers/auth'
+import auth from '@/router/routers/auth'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import type { MyRouteMeta, MyRouteRecordRaw } from '@/types/router'
 import store from 'store'
@@ -13,7 +13,8 @@ const routes: MyRouteRecordRaw[] = [
         name: 'Home',
         meta: {
             title: '首页',
-            keepAlive: true
+            keepAlive: true,
+            showTabBar: true
         },
         component: () => import(/* webpackChunkName: "home" */ '@/views/Home/index.vue')
     },
diff --git a/src/config/routers/auth.ts b/src/router/routers/auth.ts
similarity index 100%
rename from src/config/routers/auth.ts
rename to src/router/routers/auth.ts
diff --git a/src/store/index.ts b/src/store/index.ts
index 5f05f19..2171852 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,12 +1,38 @@
-import { createStore } from 'vuex'
+import { UserInfo } from '@/types/user'
+import { InjectionKey } from 'vue'
+import { createStore, Store, useStore as baseUseStore } from 'vuex'
+import auth, { AuthState } from './modules/auth'
 
-export default createStore({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+export const key: InjectionKey<Store<State>> = Symbol()
+
+export interface State {
+    isLogin: boolean
+    userInfo: UserInfo
+    auth?: AuthState //这个是为了不报错用的
+}
+
+export default createStore<State>({
+    strict: true,
+    state: {
+        isLogin: false,
+        userInfo: {
+            level: 0,
+            user_id: 0,
+            nickname: '',
+            username: '',
+            avatar: 'string'
+        }
+    },
+    getters: {},
+    mutations: {},
+    actions: {},
+    modules: {
+        auth
+    }
 })
+
+// 导出函数，为了简化 useStore 的使用
+// import { useStore } from '@/store'
+export const useStore = (): Store<State> => {
+    return baseUseStore(key)
+}
diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts
new file mode 100644
index 0000000..bbecfcf
--- /dev/null
+++ b/src/store/modules/auth.ts
@@ -0,0 +1,22 @@
+import { State } from '@/store'
+import { Module } from 'vuex'
+
+const initState = {
+    accessToken: '',
+    isLogin: false
+}
+
+export default {
+    namespaced: true,
+    state: initState,
+    getters: {},
+    mutations: {
+        login (state: AuthState, payload: string) {
+            state.accessToken = payload
+            state.isLogin = true
+        }
+    },
+    actions: {}
+} as Module<AuthState, State>
+
+export type AuthState = typeof initState
diff --git a/src/types/auth.d.ts b/src/types/auth.d.ts
index 2e0f7a6..be9f57e 100644
--- a/src/types/auth.d.ts
+++ b/src/types/auth.d.ts
@@ -1,11 +1,11 @@
-export declare type LoginData = {
-    username: string;
-    password: string;
-    verify?: number;
-    invite?: string;
+export declare interface LoginData {
+    username: string
+    password: string
+    verify?: number
+    invite?: string
 }
 
 export declare type LoginResponse = {
-    access_token: string;
-    token_type: string;
+    access_token: string
+    token_type: string
 }
diff --git a/src/types/router.d.ts b/src/types/router.d.ts
index ccdb115..893e38b 100644
--- a/src/types/router.d.ts
+++ b/src/types/router.d.ts
@@ -1,14 +1,15 @@
 import { RouteMeta, RouteRecordRaw } from 'vue-router'
 
-export declare type MyRouteMeta = RouteMeta & {
+export declare interface MyRouteMeta extends RouteMeta {
     title: string
     keepAlive?: boolean
     requiresAuth?: boolean
+    showTabBar?: boolean
     scrollToTop?: boolean
     transition?: string
 }
 
-export declare type MyRouteRecordRaw = RouteRecordRaw & {
+export declare interface MyRouteRecordRaw extends RouteRecordRaw {
     name?: string
     meta?: MyRouteMeta
     children?: MyRouteRecordRaw[]
diff --git a/src/types/user.d.ts b/src/types/user.d.ts
new file mode 100644
index 0000000..e8e36a2
--- /dev/null
+++ b/src/types/user.d.ts
@@ -0,0 +1,10 @@
+export declare interface BaseInfo {
+    user_id: number
+    nickname: string
+    username: string
+    avatar: string
+}
+
+export declare type UserInfo = BaseInfo & {
+    level: number
+}
diff --git a/src/views/Auth/login.vue b/src/views/Auth/login.vue
index 138b089..aea0440 100644
--- a/src/views/Auth/login.vue
+++ b/src/views/Auth/login.vue
@@ -2,10 +2,8 @@
   登录
 </template>
 
-<script>
-export default {
-  name: 'login'
-}
+<script lang="ts" setup>
+
 </script>
 
 <style scoped>
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 90ad244..692003d 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,9 +1,16 @@
 <template>
   <div class="home">
+    {{ counter }}
   </div>
+  <button @click="store.commit('auth/login', '我是你爸爸')" class="">add</button>
 </template>
 
 <script lang="ts" setup>
+import { useStore } from '@/store'
+import { computed } from 'vue'
+
+const store = useStore()
+const counter = computed(() => store.state.auth.accessToken)
 </script>
 
 <style scoped>