vuex

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>

src/api/index.ts

@@ -1,4 +1,4 @@
-import auth from '@/config/interfaces/auth'
+import auth from '@/api/interfaces/auth'
 
 export {
     auth

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')

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')
     },

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)
+}

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

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
 }

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[]

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
+}

src/views/Auth/login.vue

@@ -2,10 +2,8 @@
   登录
 </template>
 
-<script>
-export default {
-  name: 'login'
-}
+<script lang="ts" setup>
+
 </script>
 
 <style scoped>

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>