diff --git a/package.json b/package.json
index d4bb711..0ff3a07 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "v3-admin",
-  "version": "3.0.7",
+  "version": "3.1.0-rc.1",
   "homepage": "https://github.com/un-pany/v3-admin",
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -21,10 +21,10 @@
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
+    "pinia": "^2.0.12",
     "screenfull": "^6.0.1",
     "vue": "^3.2.31",
-    "vue-router": "^4.0.14",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.1",
diff --git a/src/App.vue b/src/App.vue
index c44865e..251a462 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,9 @@
 <script lang="ts" setup>
 import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
+import { useAppStore } from '@/store/modules/app'
 
-const locale = zhCn // Element UI 默认中文
+const locale = zhCn // Element Plus 设置为中文
+
+useAppStore().initTheme() // 初始化 Theme
 </script>
diff --git a/src/components/theme-switch/index.vue b/src/components/theme-switch/index.vue
index 02e03c4..e8afc36 100644
--- a/src/components/theme-switch/index.vue
+++ b/src/components/theme-switch/index.vue
@@ -23,15 +23,16 @@
 <script lang="ts" setup>
 import { MagicStick } from '@element-plus/icons-vue'
 import { computed } from 'vue'
-import { store } from '@/store'
+import { useAppStore } from '@/store/modules/app'
 
+const appStore = useAppStore()
 const themeList = computed(() => {
-  return store.state.app.themeList
+  return appStore.themeList
 })
 const activeThemeName = computed(() => {
-  return store.state.app.activeThemeName
+  return appStore.activeThemeName
 })
 const handleSetTheme = (name: string) => {
-  store.commit('app/SET_THEME', name)
+  appStore.setTheme(name)
 }
 </script>
diff --git a/src/directives/permission/index.ts b/src/directives/permission/index.ts
index 1e90d54..60965c4 100755
--- a/src/directives/permission/index.ts
+++ b/src/directives/permission/index.ts
@@ -1,11 +1,11 @@
-import { store } from '@/store'
+import { useUserStoreHook } from '@/store/modules/user'
 import { Directive } from 'vue'
 
 /** 权限指令 */
 export const permission: Directive = {
   mounted(el, binding) {
     const { value } = binding
-    const roles = store.state.user.roles
+    const roles = useUserStoreHook().roles
     if (value && value instanceof Array && value.length > 0) {
       const permissionRoles = value
       const hasPermission = roles.some((role: any) => {
@@ -15,7 +15,7 @@ export const permission: Directive = {
         el.style.display = 'none'
       }
     } else {
-      throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"')
+      throw new Error("need roles! Like v-permission=\"['admin','editor']\"")
     }
   }
 }
diff --git a/src/layout/components/navigation-bar/index.vue b/src/layout/components/navigation-bar/index.vue
index e2a7dc9..78e2234 100644
--- a/src/layout/components/navigation-bar/index.vue
+++ b/src/layout/components/navigation-bar/index.vue
@@ -36,28 +36,33 @@
 import { UserFilled } from '@element-plus/icons-vue'
 import { computed, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import { store } from '@/store'
+import { useAppStore } from '@/store/modules/app'
+import { useSettingsStore } from '@/store/modules/settings'
+import { useUserStore } from '@/store/modules/user'
 import BreadCrumb from '../bread-crumb/index.vue'
 import Hamburger from '../hamburger/index.vue'
 import ThemeSwitch from '@/components/theme-switch/index.vue'
 import Screenfull from '@/components/screenfull/index.vue'
 
 const router = useRouter()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const userStore = useUserStore()
 const sidebar = computed(() => {
-  return store.state.app.sidebar
+  return appStore.sidebar
 })
 const showThemeSwitch = computed(() => {
-  return store.state.settings.showThemeSwitch
+  return settingsStore.showThemeSwitch
 })
 const showScreenfull = computed(() => {
-  return store.state.settings.showScreenfull
+  return settingsStore.showScreenfull
 })
 const state = reactive({
   toggleSideBar: () => {
-    store.commit('app/TOGGLE_SIDEBAR', false)
+    appStore.toggleSidebar(false)
   },
   logout: () => {
-    store.dispatch('user/logout')
+    userStore.logout()
     router.push('/login').catch((err) => {
       console.warn(err)
     })
diff --git a/src/layout/components/settings/index.vue b/src/layout/components/settings/index.vue
index 7ff3883..fdc2485 100755
--- a/src/layout/components/settings/index.vue
+++ b/src/layout/components/settings/index.vue
@@ -30,21 +30,23 @@
 </template>
 
 <script lang="ts" setup>
-import { store } from '@/store'
+import { useSettingsStore } from '@/store/modules/settings'
 import { reactive, watch } from 'vue'
 
+const settingsStore = useSettingsStore()
+
 const state = reactive({
-  fixedHeader: store.state.settings.fixedHeader,
-  showTagsView: store.state.settings.showTagsView,
-  showSidebarLogo: store.state.settings.showSidebarLogo,
-  showThemeSwitch: store.state.settings.showThemeSwitch,
-  showScreenfull: store.state.settings.showScreenfull
+  fixedHeader: settingsStore.fixedHeader,
+  showTagsView: settingsStore.showTagsView,
+  showSidebarLogo: settingsStore.showSidebarLogo,
+  showThemeSwitch: settingsStore.showThemeSwitch,
+  showScreenfull: settingsStore.showScreenfull
 })
 
 watch(
   () => state.fixedHeader,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'fixedHeader',
       value
     })
@@ -54,7 +56,7 @@ watch(
 watch(
   () => state.showTagsView,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showTagsView',
       value
     })
@@ -64,7 +66,7 @@ watch(
 watch(
   () => state.showSidebarLogo,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showSidebarLogo',
       value
     })
@@ -74,7 +76,7 @@ watch(
 watch(
   () => state.showThemeSwitch,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showThemeSwitch',
       value
     })
@@ -84,7 +86,7 @@ watch(
 watch(
   () => state.showScreenfull,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showScreenfull',
       value
     })
diff --git a/src/layout/components/sidebar/index.vue b/src/layout/components/sidebar/index.vue
index 9be27f3..98b1064 100644
--- a/src/layout/components/sidebar/index.vue
+++ b/src/layout/components/sidebar/index.vue
@@ -26,19 +26,21 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { store } from '@/store'
+import { useAppStore } from '@/store/modules/app'
+import { usePermissionStore } from '@/store/modules/permission'
+import { useSettingsStore } from '@/store/modules/settings'
 import SidebarItem from './sidebar-item.vue'
 import SidebarLogo from './sidebar-logo.vue'
 
 const route = useRoute()
 const sidebar = computed(() => {
-  return store.state.app.sidebar
+  return useAppStore().sidebar
 })
 const routes = computed(() => {
-  return store.state.permission.routes
+  return usePermissionStore().routes
 })
 const showLogo = computed(() => {
-  return store.state.settings.showSidebarLogo
+  return useSettingsStore().showSidebarLogo
 })
 const activeMenu = computed(() => {
   const { meta, path } = route
diff --git a/src/layout/components/tags-view/index.vue b/src/layout/components/tags-view/index.vue
index 73dab74..e87ec01 100644
--- a/src/layout/components/tags-view/index.vue
+++ b/src/layout/components/tags-view/index.vue
@@ -48,13 +48,15 @@
 
 <script lang="ts" setup>
 import path from 'path'
-import { store } from '@/store'
-import { ITagView } from '@/store/modules/tags-view'
+import { useTagsViewStore, ITagView } from '@/store/modules/tags-view'
+import { usePermissionStore } from '@/store/modules/permission'
 import { computed, getCurrentInstance, nextTick, onBeforeMount, reactive, watch } from 'vue'
 import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
 import ScrollPane from './scroll-pane.vue'
 import { Close } from '@element-plus/icons-vue'
 
+const tagsViewStore = useTagsViewStore()
+const permissionStore = usePermissionStore()
 const router = useRouter()
 const instance = getCurrentInstance()
 const currentRoute = useRoute()
@@ -102,9 +104,9 @@ const state = reactive({
     })
   },
   closeSelectedTag: (view: ITagView) => {
-    store.commit('tagsView/DEL_VISITED_VIEW', view)
+    tagsViewStore.delVisitedView(view)
     if (state.isActive(view)) {
-      toLastView(store.state.tagsView.visitedViews, view)
+      toLastView(tagsViewStore.visitedViews, view)
     }
   },
   closeOthersTags: () => {
@@ -116,17 +118,14 @@ const state = reactive({
         console.warn(err)
       })
     }
-    store.commit(
-      'tagsView/DEL_OTHERS_VISITED_VIEWS',
-      state.selectedTag as ITagView
-    )
+    tagsViewStore.delOthersVisitedViews(state.selectedTag as ITagView)
   },
   closeAllTags: (view: ITagView) => {
-    store.commit('tagsView/DEL_ALL_VISITED_VIEWS')
+    tagsViewStore.delAllVisitedViews()
     if (state.affixTags.some((tag) => tag.path === currentRoute.path)) {
       return
     }
-    toLastView(store.state.tagsView.visitedViews, view)
+    toLastView(tagsViewStore.visitedViews, view)
   },
   openMenu: (tag: ITagView, e: MouseEvent) => {
     const menuMinWidth = 105
@@ -149,9 +148,9 @@ const state = reactive({
 })
 
 const visitedViews = computed(() => {
-  return store.state.tagsView.visitedViews
+  return tagsViewStore.visitedViews
 })
-const routes = computed(() => store.state.permission.routes)
+const routes = computed(() => permissionStore.routes)
 
 const filterAffixTags = (routes: RouteRecordRaw[], basePath = '/') => {
   let tags: ITagView[] = []
@@ -182,17 +181,14 @@ const initTags = () => {
   for (const tag of state.affixTags) {
     // 必须含有 name 属性
     if (tag.name) {
-      store.commit(
-        'tagsView/ADD_VISITED_VIEW',
-        tag as ITagView
-      )
+      tagsViewStore.addVisitedView(tag as ITagView)
     }
   }
 }
 
 const addTags = () => {
   if (currentRoute.name) {
-    store.commit('tagsView/ADD_VISITED_VIEW', currentRoute)
+    tagsViewStore.addVisitedView(currentRoute)
   }
   return false
 }
@@ -206,10 +202,7 @@ const moveToCurrentTag = () => {
     if ((tag.to as ITagView).path === currentRoute.path) {
       // When query is different then update
       if ((tag.to as ITagView).fullPath !== currentRoute.fullPath) {
-        store.commit(
-          'tags-view/UPDATE_VISITED_VIEW',
-          currentRoute
-        )
+        tagsViewStore.updateVisitedView(currentRoute)
       }
     }
   }
@@ -269,9 +262,9 @@ onBeforeMount(() => {
         margin-right: 15px;
       }
       &.active {
-        background-color: #409EFF;
+        background-color: #409eff;
         color: #fff;
-        border-color: #409EFF;
+        border-color: #409eff;
         &::before {
           content: "";
           background: #fff;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index e61dfbc..faff55e 100755
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -21,17 +21,19 @@
 </template>
 
 <script lang="ts" setup>
-import { DeviceType } from '@/store/modules/app'
+import { useAppStore, DeviceType } from '@/store/modules/app'
+import { useSettingsStore } from '@/store/modules/settings'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, reactive } from 'vue'
-import { store } from '@/store'
 import { AppMain, NavigationBar, Settings, Sidebar, TagsView, RightPanel } from './components'
-import userResize from './userResize'
+import useResize from './useResize'
 
-const { sidebar, device, addEventListenerOnResize, resizeMounted, removeEventListenerResize, watchRouter } = userResize()
+const { sidebar, device, addEventListenerOnResize, resizeMounted, removeEventListenerResize, watchRouter } = useResize()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
 
 const state = reactive({
   handleClickOutside: () => {
-    store.commit('app/CLOSE_SIDEBAR', false)
+    appStore.closeSidebar(false)
   }
 })
 
@@ -43,15 +45,14 @@ const classObj = computed(() => {
     mobile: device.value === DeviceType.Mobile
   }
 })
-
 const showSettings = computed(() => {
-  return store.state.settings.showSettings
+  return settingsStore.showSettings
 })
 const showTagsView = computed(() => {
-  return store.state.settings.showTagsView
+  return settingsStore.showTagsView
 })
 const fixedHeader = computed(() => {
-  return store.state.settings.fixedHeader
+  return settingsStore.fixedHeader
 })
 
 watchRouter()
diff --git a/src/layout/userResize.ts b/src/layout/useResize.ts
similarity index 68%
rename from src/layout/userResize.ts
rename to src/layout/useResize.ts
index 17b1422..5eac073 100644
--- a/src/layout/userResize.ts
+++ b/src/layout/useResize.ts
@@ -1,5 +1,4 @@
-import { store } from '@/store'
-import { DeviceType } from '@/store/modules/app'
+import { useAppStore, DeviceType } from '@/store/modules/app'
 import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -8,12 +7,14 @@ const WIDTH = 992
 
 /** 根据大小变化重新布局 */
 export default function() {
+  const appStore = useAppStore()
+
   const device = computed(() => {
-    return store.state.app.device
+    return appStore.device
   })
 
   const sidebar = computed(() => {
-    return store.state.app.sidebar
+    return appStore.sidebar
   })
 
   const currentRoute = useRoute()
@@ -21,11 +22,8 @@ export default function() {
   const watchRouter = watch(
     () => currentRoute.name,
     () => {
-      if (
-        store.state.app.device === DeviceType.Mobile &&
-        store.state.app.sidebar.opened
-      ) {
-        store.commit('app/CLOSE_SIDEBAR', false)
+      if (appStore.device === DeviceType.Mobile && appStore.sidebar.opened) {
+        appStore.closeSidebar(false)
       }
     }
   )
@@ -37,19 +35,18 @@ export default function() {
 
   const resizeMounted = () => {
     if (isMobile()) {
-      store.commit('app/TOGGLE_DEVICE', DeviceType.Mobile)
-      store.commit('app/CLOSE_SIDEBAR', true)
+      appStore.toggleDevice(DeviceType.Mobile)
+      appStore.closeSidebar(true)
     }
   }
 
   const resizeHandler = () => {
     if (!document.hidden) {
-      store.commit(
-        'app/TOGGLE_DEVICE',
+      appStore.toggleDevice(
         isMobile() ? DeviceType.Mobile : DeviceType.Desktop
       )
       if (isMobile()) {
-        store.commit('app/CLOSE_SIDEBAR', true)
+        appStore.closeSidebar(true)
       }
     }
   }
diff --git a/src/main.ts b/src/main.ts
index b3d011d..c8391ac 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp, Directive } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { store } from './store'
+import store from './store'
 import { loadAllPlugins } from './plugins'
 import '@/styles/index.scss'
 import 'normalize.css'
diff --git a/src/router/permission.ts b/src/router/permission.ts
index 27bcf9f..3f102ca 100644
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@@ -2,12 +2,15 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import router from '@/router'
 import { RouteLocationNormalized } from 'vue-router'
-import { store } from '@/store'
+import { useUserStoreHook } from '@/store/modules/user'
+import { usePermissionStoreHook } from '@/store/modules/permission'
 import { ElMessage } from 'element-plus'
 import { whiteList } from '@/config/white-list'
 import rolesSettings from '@/config/roles'
 import { getToken } from '@/utils/cookies'
 
+const userStore = useUserStoreHook()
+const permissionStore = usePermissionStoreHook()
 NProgress.configure({ showSpinner: false })
 
 router.beforeEach(async(to: RouteLocationNormalized, _: RouteLocationNormalized, next: any) => {
@@ -20,22 +23,22 @@ router.beforeEach(async(to: RouteLocationNormalized, _: RouteLocationNormalized,
       NProgress.done()
     } else {
       // 检查用户是否已获得其权限角色
-      if (store.state.user.roles.length === 0) {
+      if (userStore.roles.length === 0) {
         try {
           if (rolesSettings.openRoles) {
             // 注意：角色必须是一个数组！ 例如: ['admin'] 或 ['developer', 'editor']
-            await store.dispatch('user/getInfo')
+            await userStore.getInfo()
             // 获取接口返回的 roles
-            const roles = store.state.user.roles
+            const roles = userStore.roles
             // 根据角色生成可访问的 routes
-            store.dispatch('permission/setRoutes', roles)
+            permissionStore.setRoutes(roles)
           } else {
             // 没有开启角色功能，则启用默认角色
-            store.commit('user/SET_ROLES', rolesSettings.defaultRoles)
-            store.dispatch('permission/setRoutes', rolesSettings.defaultRoles)
+            userStore.setRoles(rolesSettings.defaultRoles)
+            permissionStore.setRoutes(rolesSettings.defaultRoles)
           }
           // 动态地添加可访问的 routes
-          store.state.permission.dynamicRoutes.forEach((route) => {
+          permissionStore.dynamicRoutes.forEach((route) => {
             router.addRoute(route)
           })
           // 确保添加路由已完成
@@ -43,7 +46,7 @@ router.beforeEach(async(to: RouteLocationNormalized, _: RouteLocationNormalized,
           next({ ...to, replace: true })
         } catch (err: any) {
           // 删除 token，并重定向到登录页面
-          store.dispatch('user/resetToken')
+          userStore.resetToken()
           ElMessage.error(err.message || 'Has Error')
           next('/login')
           NProgress.done()
diff --git a/src/store/index.ts b/src/store/index.ts
index 39ca899..94e2432 100755
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,24 +1,5 @@
-import { createStore } from 'vuex'
-import app, { IAppState } from './modules/app'
-import permission, { IPermissionState } from './modules/permission'
-import settings, { ISettingsState } from './modules/settings'
-import tagsView, { ITagsViewState } from './modules/tags-view'
-import user, { IUserState } from './modules/user'
+import { createPinia } from 'pinia'
 
-interface IRootState {
-  app: IAppState
-  permission: IPermissionState
-  settings: ISettingsState
-  user: IUserState
-  tagsView: ITagsViewState
-}
+const store = createPinia()
 
-export const store = createStore<IRootState>({
-  modules: {
-    app,
-    permission,
-    settings,
-    tagsView,
-    user
-  }
-})
+export default store
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 901ee57..75eef28 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,3 +1,4 @@
+import { defineStore } from 'pinia'
 import {
   getSidebarStatus,
   getActiveThemeName,
@@ -11,7 +12,7 @@ export enum DeviceType {
   Desktop,
 }
 
-export interface IAppState {
+interface IAppState {
   device: DeviceType
   sidebar: {
     opened: boolean
@@ -23,56 +24,52 @@ export interface IAppState {
   activeThemeName: string
 }
 
-const state: IAppState = {
-  device: DeviceType.Desktop,
-  sidebar: {
-    opened: getSidebarStatus() !== 'closed',
-    withoutAnimation: false
+export const useAppStore = defineStore({
+  id: 'app',
+  state: (): IAppState => {
+    return {
+      device: DeviceType.Desktop,
+      sidebar: {
+        opened: getSidebarStatus() !== 'closed',
+        withoutAnimation: false
+      },
+      themeList: themeList,
+      activeThemeName: getActiveThemeName() || 'normal'
+    }
   },
-  themeList: themeList,
-  activeThemeName: getActiveThemeName() || 'normal'
-}
-
-// 初始化
-document.body.className = `theme-${state.activeThemeName}`
-
-const mutations = {
-  TOGGLE_SIDEBAR: (state: IAppState, withoutAnimation: boolean) => {
-    state.sidebar.opened = !state.sidebar.opened
-    state.sidebar.withoutAnimation = withoutAnimation
-    if (state.sidebar.opened) {
-      setSidebarStatus('opened')
-    } else {
+  actions: {
+    toggleSidebar(withoutAnimation: boolean) {
+      this.sidebar.opened = !this.sidebar.opened
+      this.sidebar.withoutAnimation = withoutAnimation
+      if (this.sidebar.opened) {
+        setSidebarStatus('opened')
+      } else {
+        setSidebarStatus('closed')
+      }
+    },
+    closeSidebar(withoutAnimation: boolean) {
+      this.sidebar.opened = false
+      this.sidebar.withoutAnimation = withoutAnimation
       setSidebarStatus('closed')
+    },
+    toggleDevice(device: DeviceType) {
+      this.device = device
+    },
+    setTheme(activeThemeName: string) {
+      // 检查这个主题在主题列表里是否存在
+      this.activeThemeName = this.themeList.find(
+        (theme) => theme.name === activeThemeName
+      )
+        ? activeThemeName
+        : this.themeList[0].name
+      // 应用到 dom
+      document.body.className = `theme-${this.activeThemeName}`
+      // 持久化
+      setActiveThemeName(this.activeThemeName)
+    },
+    initTheme() {
+      // 初始化
+      document.body.className = `theme-${this.activeThemeName}`
     }
-  },
-  CLOSE_SIDEBAR: (state: IAppState, withoutAnimation: boolean) => {
-    state.sidebar.opened = false
-    state.sidebar.withoutAnimation = withoutAnimation
-    setSidebarStatus('closed')
-  },
-  TOGGLE_DEVICE: (state: IAppState, device: DeviceType) => {
-    state.device = device
-  },
-  SET_THEME: (state: IAppState, activeThemeName: string) => {
-    // 检查这个主题在主题列表里是否存在
-    state.activeThemeName = state.themeList.find(
-      (theme) => theme.name === activeThemeName
-    )
-      ? activeThemeName
-      : state.themeList[0].name
-    // 应用到 dom
-    document.body.className = `theme-${state.activeThemeName}`
-    // 持久化
-    setActiveThemeName(state.activeThemeName)
   }
-}
-
-const actions = {}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+})
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 4af58ed..df3cfa9 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,7 +1,9 @@
+import store from '@/store'
+import { defineStore } from 'pinia'
 import { RouteRecordRaw } from 'vue-router'
 import { constantRoutes, asyncRoutes } from '@/router'
 
-export interface IPermissionState {
+interface IPermissionState {
   routes: RouteRecordRaw[]
   dynamicRoutes: RouteRecordRaw[]
 }
@@ -34,33 +36,29 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
   return res
 }
 
-const state: IPermissionState = {
-  routes: [],
-  dynamicRoutes: []
-}
-
-const mutations = {
-  SET_ROUTES: (state: IPermissionState, routes: RouteRecordRaw[]) => {
-    state.routes = constantRoutes.concat(routes)
-    state.dynamicRoutes = routes
-  }
-}
-
-const actions = {
-  setRoutes({ commit }: any, roles: string[]) {
-    let accessedRoutes
-    if (roles.includes('admin')) {
-      accessedRoutes = asyncRoutes
-    } else {
-      accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+export const usePermissionStore = defineStore({
+  id: 'permission',
+  state: (): IPermissionState => {
+    return {
+      routes: [],
+      dynamicRoutes: []
+    }
+  },
+  actions: {
+    setRoutes(roles: string[]) {
+      let accessedRoutes
+      if (roles.includes('admin')) {
+        accessedRoutes = asyncRoutes
+      } else {
+        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+      }
+      this.routes = constantRoutes.concat(accessedRoutes)
+      this.dynamicRoutes = accessedRoutes
     }
-    commit('SET_ROUTES', accessedRoutes)
   }
-}
+})
 
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
+/** 在 setup 外使用 */
+export function usePermissionStoreHook() {
+  return usePermissionStore(store)
 }
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 37d8bb4..39961ef 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,6 +1,7 @@
+import { defineStore } from 'pinia'
 import layoutSettings from '@/config/layout'
 
-export interface ISettingsState {
+interface ISettingsState {
   fixedHeader: boolean
   showSettings: boolean
   showTagsView: boolean
@@ -9,51 +10,43 @@ export interface ISettingsState {
   showScreenfull: boolean
 }
 
-const state: ISettingsState = {
-  fixedHeader: layoutSettings.fixedHeader,
-  showSettings: layoutSettings.showSettings,
-  showTagsView: layoutSettings.showTagsView,
-  showSidebarLogo: layoutSettings.showSidebarLogo,
-  showThemeSwitch: layoutSettings.showThemeSwitch,
-  showScreenfull: layoutSettings.showScreenfull
-}
-
-const mutations = {
-  CHANGE_SETTING: (
-    state: ISettingsState,
-    payload: { key: string, value: any }
-  ) => {
-    const { key, value } = payload
-    switch (key) {
-      case 'fixedHeader':
-        state.fixedHeader = value
-        break
-      case 'showSettings':
-        state.showSettings = value
-        break
-      case 'showSidebarLogo':
-        state.showSidebarLogo = value
-        break
-      case 'showTagsView':
-        state.showTagsView = value
-        break
-      case 'showThemeSwitch':
-        state.showThemeSwitch = value
-        break
-      case 'showScreenfull':
-        state.showScreenfull = value
-        break
-      default:
-        break
+export const useSettingsStore = defineStore({
+  id: 'settings',
+  state: (): ISettingsState => {
+    return {
+      fixedHeader: layoutSettings.fixedHeader,
+      showSettings: layoutSettings.showSettings,
+      showTagsView: layoutSettings.showTagsView,
+      showSidebarLogo: layoutSettings.showSidebarLogo,
+      showThemeSwitch: layoutSettings.showThemeSwitch,
+      showScreenfull: layoutSettings.showScreenfull
+    }
+  },
+  actions: {
+    changeSetting(payload: { key: string, value: any }) {
+      const { key, value } = payload
+      switch (key) {
+        case 'fixedHeader':
+          this.fixedHeader = value
+          break
+        case 'showSettings':
+          this.showSettings = value
+          break
+        case 'showSidebarLogo':
+          this.showSidebarLogo = value
+          break
+        case 'showTagsView':
+          this.showTagsView = value
+          break
+        case 'showThemeSwitch':
+          this.showThemeSwitch = value
+          break
+        case 'showScreenfull':
+          this.showScreenfull = value
+          break
+        default:
+          break
+      }
     }
   }
-}
-
-const actions = {}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+})
diff --git a/src/store/modules/tags-view.ts b/src/store/modules/tags-view.ts
index f3809b5..fa88bad 100644
--- a/src/store/modules/tags-view.ts
+++ b/src/store/modules/tags-view.ts
@@ -1,3 +1,4 @@
+import { defineStore } from 'pinia'
 import { _RouteLocationBase, RouteLocationNormalized } from 'vue-router'
 
 export interface ITagView extends Partial<RouteLocationNormalized> {
@@ -5,56 +6,51 @@ export interface ITagView extends Partial<RouteLocationNormalized> {
   to?: _RouteLocationBase
 }
 
-export interface ITagsViewState {
+interface ITagsViewState {
   visitedViews: ITagView[]
 }
 
-const state: ITagsViewState = {
-  visitedViews: []
-}
-
-const mutations = {
-  ADD_VISITED_VIEW: (state: ITagsViewState, view: ITagView) => {
-    if (state.visitedViews.some((v) => v.path === view.path)) return
-    state.visitedViews.push(
-      Object.assign({}, view, {
-        title: view.meta?.title || 'no-name'
-      })
-    )
-  },
-  DEL_VISITED_VIEW: (state: ITagsViewState, view: ITagView) => {
-    for (const [i, v] of state.visitedViews.entries()) {
-      if (v.path === view.path) {
-        state.visitedViews.splice(i, 1)
-        break
-      }
+export const useTagsViewStore = defineStore({
+  id: 'tags-view',
+  state: (): ITagsViewState => {
+    return {
+      visitedViews: []
     }
   },
-  DEL_OTHERS_VISITED_VIEWS: (state: ITagsViewState, view: ITagView) => {
-    state.visitedViews = state.visitedViews.filter((v) => {
-      return v.meta?.affix || v.path === view.path
-    })
-  },
-  DEL_ALL_VISITED_VIEWS: (state: ITagsViewState) => {
-    // keep affix tags
-    const affixTags = state.visitedViews.filter((tag) => tag.meta?.affix)
-    state.visitedViews = affixTags
-  },
-  UPDATE_VISITED_VIEW: (state: ITagsViewState, view: ITagView) => {
-    for (let v of state.visitedViews) {
-      if (v.path === view.path) {
-        v = Object.assign(v, view)
-        break
+  actions: {
+    addVisitedView(view: ITagView) {
+      if (this.visitedViews.some((v) => v.path === view.path)) return
+      this.visitedViews.push(
+        Object.assign({}, view, {
+          title: view.meta?.title || 'no-name'
+        })
+      )
+    },
+    delVisitedView(view: ITagView) {
+      for (const [i, v] of this.visitedViews.entries()) {
+        if (v.path === view.path) {
+          this.visitedViews.splice(i, 1)
+          break
+        }
+      }
+    },
+    delOthersVisitedViews(view: ITagView) {
+      this.visitedViews = this.visitedViews.filter((v) => {
+        return v.meta?.affix || v.path === view.path
+      })
+    },
+    delAllVisitedViews() {
+      // keep affix tags
+      const affixTags = this.visitedViews.filter((tag) => tag.meta?.affix)
+      this.visitedViews = affixTags
+    },
+    updateVisitedView(view: ITagView) {
+      for (let v of this.visitedViews) {
+        if (v.path === view.path) {
+          v = Object.assign(v, view)
+          break
+        }
       }
     }
   }
-}
-
-const actions = {}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+})
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index aba667d..bd4e58b 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,99 +1,88 @@
+import store from '@/store'
+import { defineStore } from 'pinia'
+import { usePermissionStore } from './permission'
 import { getToken, removeToken, setToken } from '@/utils/cookies'
 import router, { resetRouter } from '@/router'
 import { accountLogin, userInfoRequest } from '@/api/login'
 import { RouteRecordRaw } from 'vue-router'
 
-export interface IUserState {
+interface IUserState {
   token: string
-  name: string
-  avatar: string
   roles: string[]
 }
 
-const state: IUserState = {
-  token: getToken() || '',
-  name: '',
-  avatar: '',
-  roles: []
-}
-
-const mutations = {
-  SET_TOKEN: (state: IUserState, token: string) => {
-    state.token = token
-  },
-  SET_NAME: (state: IUserState, name: string) => {
-    state.name = name
-  },
-  SET_AVATAR: (state: IUserState, avatar: string) => {
-    state.avatar = avatar
-  },
-  SET_ROLES: (state: IUserState, roles: string[]) => {
-    state.roles = roles
-  }
-}
-
-const actions = {
-  /** 登录 */
-  login({ commit }: any, userInfo: { username: string, password: string }) {
-    let { username, password } = userInfo
-    username = username.trim()
-    return new Promise((resolve, reject) => {
-      accountLogin({ username, password })
-        .then((res: any) => {
-          setToken(res.data.accessToken)
-          commit('SET_TOKEN', res.data.accessToken)
-          resolve(true)
-        })
-        .catch((error) => {
-          reject(error)
-        })
-    })
-  },
-  /** 获取用户详情 */
-  getInfo({ commit }: any) {
-    return new Promise((resolve, reject) => {
-      userInfoRequest()
-        .then((res: any) => {
-          commit('SET_NAME', res.data.user.name)
-          commit('SET_AVATAR', res.data.user.avatar)
-          commit('SET_ROLES', res.data.user.roles)
-          resolve(res)
-        })
-        .catch((error) => {
-          reject(error)
-        })
-    })
+export const useUserStore = defineStore({
+  id: 'user',
+  state: (): IUserState => {
+    return {
+      token: getToken() || '',
+      roles: []
+    }
   },
-  /** 切换角色 */
-  async changeRoles({ commit, state, dispatch, rootState }: any, role: string) {
-    const token = role + '-token'
-    commit('SET_TOKEN', token)
-    setToken(token)
-    await dispatch('getInfo')
-    dispatch('permission/setRoutes', state.roles, { root: true })
-    resetRouter()
-    rootState.permission.dynamicRoutes.forEach((item: RouteRecordRaw) => {
-      router.addRoute(item)
-    })
-  },
-  /** 登出 */
-  logout({ commit }: any) {
-    removeToken()
-    commit('SET_TOKEN', '')
-    commit('SET_ROLES', [])
-    resetRouter()
-  },
-  /** 重置 token */
-  resetToken({ commit }: any) {
-    removeToken()
-    commit('SET_TOKEN', '')
-    commit('SET_ROLES', [])
+  actions: {
+    /** 设置角色数组 */
+    setRoles(roles: string[]) {
+      this.roles = roles
+    },
+    /** 登录 */
+    login(userInfo: { username: string, password: string }) {
+      let { username, password } = userInfo
+      username = username.trim()
+      return new Promise((resolve, reject) => {
+        accountLogin({ username, password })
+          .then((res: any) => {
+            setToken(res.data.accessToken)
+            this.token = res.data.accessToken
+            resolve(true)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    /** 获取用户详情 */
+    getInfo() {
+      return new Promise((resolve, reject) => {
+        userInfoRequest()
+          .then((res: any) => {
+            this.roles = res.data.user.roles
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    /** 切换角色 */
+    async changeRoles(role: string) {
+      const token = role + '-token'
+      this.token = token
+      setToken(token)
+      await this.getInfo()
+      const permissionStore = usePermissionStore()
+      permissionStore.setRoutes(this.roles)
+      resetRouter()
+      permissionStore.dynamicRoutes.forEach((item: RouteRecordRaw) => {
+        router.addRoute(item)
+      })
+    },
+    /** 登出 */
+    logout() {
+      removeToken()
+      this.token = ''
+      this.roles = []
+      resetRouter()
+    },
+    /** 重置 token */
+    resetToken() {
+      removeToken()
+      this.token = ''
+      this.roles = []
+    }
   }
-}
+})
 
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
+/** 在 setup 外使用 */
+export function useUserStoreHook() {
+  return useUserStore(store)
 }
diff --git a/src/utils/permission.ts b/src/utils/permission.ts
index 1094bae..68aaf6b 100755
--- a/src/utils/permission.ts
+++ b/src/utils/permission.ts
@@ -1,9 +1,9 @@
-import { store } from '@/store'
+import { useUserStoreHook } from '@/store/modules/user'
 
 /** 全局权限判断函数，和指令 v-permission 功能类似 */
 export const checkPermission = (value: string[]): boolean => {
   if (value && value instanceof Array && value.length > 0) {
-    const roles = store.state.user.roles
+    const roles = useUserStoreHook().roles
     const permissionRoles = value
     return roles.some(role => {
       return permissionRoles.includes(role)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1991401..673502c 100755
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -3,14 +3,14 @@
 </template>
 
 <script lang="ts" setup>
-import { store } from '@/store'
+import { useUserStore } from '@/store/modules/user'
 import { computed, onBeforeMount, ref } from 'vue'
 import AdminDashboard from './admin/index.vue'
 import EditorDashboard from './editor/index.vue'
 
 const currentRole = ref('admin')
 const roles = computed(() => {
-  return store.state.user.roles
+  return useUserStore().roles
 })
 onBeforeMount(() => {
   if (!roles.value.includes('admin')) {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 6724e20..599f3fc 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -57,7 +57,7 @@
 
 <script lang='ts' setup>
 import { reactive, ref } from 'vue'
-import { store } from '@/store'
+import { useUserStore } from '@/store/modules/user'
 import { useRouter } from 'vue-router'
 import { User, Lock, Key } from '@element-plus/icons-vue'
 import ThemeSwitch from '@/components/theme-switch/index.vue'
@@ -100,7 +100,7 @@ const handleLogin = () => {
   loginFormDom.value.validate((valid: boolean) => {
     if (valid) {
       loading.value = true
-      store.dispatch('user/login', {
+      useUserStore().login({
         username: loginForm.username,
         password: loginForm.password
       }).then(() => {
diff --git a/src/views/permission/components/switch-roles.vue b/src/views/permission/components/switch-roles.vue
index 6b13221..4c5b2b3 100644
--- a/src/views/permission/components/switch-roles.vue
+++ b/src/views/permission/components/switch-roles.vue
@@ -15,14 +15,15 @@
 </template>
 
 <script lang="ts" setup>
-import { store } from '@/store'
+import { useUserStore } from '@/store/modules/user'
 import { computed, ref, watch } from 'vue'
 
+const userStore = useUserStore()
 const emit = defineEmits(['change'])
-const roles = computed(() => store.state.user.roles)
+const roles = computed(() => userStore.roles)
 const currentRole = ref(roles.value[0])
 watch(currentRole, async(value) => {
-  await store.dispatch('user/changeRoles', value)
+  await userStore.changeRoles(value)
   emit('change')
 })
 </script>
diff --git a/yarn.lock b/yarn.lock
index 3d96134..cab3c9b 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -1817,11 +1817,16 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11":
+"@vue/devtools-api@^6.0.0":
   version "6.1.0"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.0.tgz#5b7945e656bc0f85b1774c9aca1dbe075bead3c0"
   integrity sha512-1FtbxEEHN70WGJl1b/h8nLmyN+tOHONNsNLvgVEXF/L/vBrRqQZ0kF+dev1YAz3OtxsQ1sV/vPLKwRlq1axrgg==
 
+"@vue/devtools-api@^6.1.0":
+  version "6.1.4"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
+  integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
+
 "@vue/eslint-config-standard@^6.1.0":
   version "6.1.0"
   resolved "https://registry.npmmirror.com/@vue/eslint-config-standard/-/eslint-config-standard-6.1.0.tgz#b362ba67c86caa4e7b44481c2303c9dccc2dc037"
@@ -5990,6 +5995,14 @@ pidtree@^0.5.0:
   resolved "https://registry.npmmirror.com/pidtree/-/pidtree-0.5.0.tgz#ad5fbc1de78b8a5f99d6fbdd4f6e4eee21d1aca1"
   integrity sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==
 
+pinia@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.12.tgz#4c6f7f59cb41f56f20deee71c403e66d8d3c637d"
+  integrity sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==
+  dependencies:
+    "@vue/devtools-api" "^6.1.0"
+    vue-demi "*"
+
 pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -7813,13 +7826,6 @@ vue@^3.2.31:
     "@vue/server-renderer" "3.2.31"
     "@vue/shared" "3.2.31"
 
-vuex@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
-  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 watchpack@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmmirror.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"