fix store

src/layouts/components/UserProfile.vue

@@ -9,7 +9,7 @@ const store = useStore();
 // 执行注销操作
 const logout = () => {
   // 清除登录状态信息
-  store.dispatch('clearToken');
+  store.dispatch('auth/clearToken');
 
   // 重定向到登录页面或其他适当的页面
   router.push('/login')

src/pages/login.vue

@@ -62,8 +62,8 @@ const login = () => {
       const token = response.access_token;
 
       // 更新token和remember状态到Vuex Store
-      store.dispatch('updateToken', token);
+      store.dispatch('auth/updateToken', token);
-      store.dispatch('updateRemember', form.value.remember);
+      store.dispatch('auth/updateRemember', form.value.remember);
 
       // 跳转到首页
       router.push('/')
@@ -90,8 +90,8 @@ const login = () => {
 // 自动登录
 onMounted(() => {
   // 从Vuex Store中获取token和remember状态
-  const token = store.getters.getToken;
+  const token = store.state.auth.token;
-  const remember = store.getters.getRemember;
+  const remember = store.state.auth.remember;
 
   // 如果token存在，且保持登录状态为true，则跳转到首页
   if (token && remember) {

src/router/index.ts

@@ -105,7 +105,7 @@ const router = createRouter({
 // 导航守卫
 router.beforeEach((to, from, next) => {
   // 通过 Vuex Store 检查用户是否已登录
-  const isAuthenticated = store.getters.getToken !== null;
+  const isAuthenticated = store.state.auth.token !== null;
   if (to.meta.requiresAuth && !isAuthenticated) {
     // 如果路由需要登录权限且用户未登录，则跳转到登录页面
     next('/login');

src/store/auth.ts

@@ -0,0 +1,50 @@
+import { Module } from 'vuex';
+
+// 定义状态类型
+interface AuthState {
+  token: string | null;
+  remember: boolean;
+}
+
+// 定义根状态类型
+interface RootState {
+  auth: AuthState;
+}
+
+
+// 导出模块
+const authModule: Module<AuthState, RootState> = {
+  namespaced: true,
+  state: {
+    token: null,
+    remember: false,
+  },
+  mutations: {
+    setToken(state, token: string) {
+      state.token = token;
+    },
+    clearToken(state) {
+      state.token = null;
+    },
+    setRemember(state, remember: boolean) {
+      state.remember = remember;
+    },
+  },
+  actions: {
+    updateToken({ commit }, token: string) {
+      commit('setToken', token);
+    },
+    clearToken({ commit },) {
+      commit('clearToken');
+    },
+    updateRemember({ commit }, remember: boolean) {
+      commit('setRemember', remember);
+    },
+  },
+  getters: {
+    getToken: state => state.token,
+    getRemember: state => state.remember,
+  }
+};
+
+export default authModule;

src/store/index.ts

@@ -1,52 +1,12 @@
-import { ActionTree, GetterTree, MutationTree, createStore } from 'vuex';
+import { createStore } from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
-
+import authModule from './auth';
-interface State {
-  // 登录token
-  token: string | null;
-  // 是否记住登录状态
-  remember: boolean;
-}
-
-const state: State = {
-  token: null,
-  remember: false,
-};
-
-const mutations: MutationTree<State> = {
-  setToken(state, token: string) {
-    state.token = token;
-  },
-  clearToken(state) {
-    state.token = null;
-  },
-  setRemember(state, remember: boolean) {
-    state.remember = remember;
-  },
-};
-
-const actions: ActionTree<State, any> = {
-  updateToken({ commit }, token: string) {
-    commit('setToken', token);
-  },
-  clearToken({ commit },) {
-    commit('clearToken');
-  },
-  updateRemember({ commit }, remember: boolean) {
-    commit('setRemember', remember);
-  },
-};
-
-const getters: GetterTree<State, any> = {
-  getToken: state => state.token,
-  getRemember: state => state.remember,
-};
 
 const store = createStore({
-  state,
+  modules: {
-  mutations,
+    // 用户认证store
-  actions,
+    auth: authModule,
-  getters,
+  },
   plugins: [
     createPersistedState({
       // 配置持久化存储的选项