使用Pinia代替Vuex进行数据存储

2022-06-10 22:25:19 +08:00 · 2022-06-10 22:25:19 +08:00 · 859f8acfe2
commit 859f8acfe2
parent ef604d008d
41 changed files with 700 additions and 797 deletions
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
    "jsencrypt": "3.2.1",
    "md-editor-v3": "^1.11.11",
    "nprogress": "0.2.0",
+    "pinia": "^2.0.14",
    "sortablejs": "^1.15.0",
    "vue": "^3.2.36",
    "vue-clipboard3": "^2.0.0",
@ -37,7 +38,6 @@
    "vue-i18n": "^9.1.10",
    "vue-router": "^4.0.15",
    "vue3-seamless-scroll": "^1.2.0",
-    "vuex": "4.0.2",
    "wangeditor": "^4.7.15"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@ -4,7 +4,8 @@
  </el-config-provider>
 </template>
 <script setup>
-import store from '@/store/index'
+import useUserStore from './store/modules/user'
+import useAppStore from './store/modules/app'
 import { ElConfigProvider } from 'element-plus'
 import zh from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
 import en from 'element-plus/lib/locale/lang/en' // 英文语言
@ -13,15 +14,15 @@ import tw from 'element-plus/lib/locale/lang/zh-tw' //繁体
 const { proxy } = getCurrentInstance()

 const token = computed(() => {
-  return store.getters.token
+  return useUserStore().token
 })

 const lang = computed(() => {
-  return store.getters.language
+  return useAppStore().lang
 })
 const locale = ref(zh)
 const size = ref('small')
-size.value = store.getters.size
+size.value = useAppStore().size
 watch(
  token,
  (val) => {
--- a/src/auto-import.d.ts
+++ b/src/auto-import.d.ts
@ -1,19 +1,28 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
  const effectScope: typeof import('vue')['effectScope']
  const EffectScope: typeof import('vue')['EffectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
@ -33,9 +42,12 @@ declare global {
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
@ -46,7 +58,6 @@ declare global {
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
-  const useStore: typeof import('vuex')['useStore']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
 }
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@ -21,6 +21,7 @@
 import Fuse from 'fuse.js'
 import { getNormalPath } from '@/utils/ruoyi'
 import { isHttp } from '@/utils/validate'
+import usePermissionStore from '@/store/modules/permission'

 const search = ref('');
 const options = ref([]);
@ -28,9 +29,8 @@ const searchPool = ref([]);
 const show = ref(false);
 const fuse = ref(undefined);
 const headerSearchSelectRef = ref(null);
-const store = useStore();
 const router = useRouter();
-const routes = computed(() => store.getters.permission_routes);
+const routes = computed(() => usePermissionStore().routes);

 function click() {
  show.value = !show.value
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@ -14,8 +14,9 @@
 </template>

 <script setup>
-const store = useStore()
-const lang = computed(() => store.getters.language)
+import useAppStore from '@/store/modules/app'
+const appStore = useAppStore()
+const lang = computed(() => useAppStore().lang)

 const { proxy } = getCurrentInstance()
 const langOptions = ref([
@ -26,7 +27,7 @@ const langOptions = ref([

 function handleLanguageChange(lang) {
  proxy.$modal.loading('正在设置语言，请稍候...')
-  store.dispatch('app/setLang', lang)
+  appStore.setLang(lang)
  setTimeout('window.location.reload()', 1000)
 }
 </script>
--- a/src/components/Notice/Index.vue
+++ b/src/components/Notice/Index.vue
@ -33,15 +33,18 @@
 </template>

 <script setup name="noticeIndex">
+import useSocketStore from '@/store/modules/socket'
+
 const { proxy } = getCurrentInstance()
+
 // 小红点
 const newsDot = ref(false)

 const noticeList = computed(() => {
-  return proxy.$store.getters.noticeList
+  return useSocketStore().noticeList
 })
 const noticeDot = computed(() => {
-  return proxy.$store.getters.noticeDot
+  return useSocketStore().noticeDot
 })
 // 全部已读点击
 function onAllReadClick() {
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@ -14,8 +14,9 @@
 </template>

 <script setup>
-const store = useStore()
-const size = computed(() => store.getters.size)
+import useAppStore from '@/store/modules/app'
+const appStore = useAppStore()
+const size = computed(() => appStore.size)
 const route = useRoute()
 const router = useRouter()
 const { proxy } = getCurrentInstance()
@ -25,21 +26,21 @@ const sizeOptions = ref([
  { label: proxy.$t('layout.small'), value: 'small' },
 ])

-function refreshView() {
-  // In order to make the cached page re-rendered
-  store.dispatch('tagsView/delAllCachedViews', route)
+// function refreshView() {
+//   // In order to make the cached page re-rendered
+//   store.dispatch('tagsView/delAllCachedViews', route)

-  const { fullPath } = route
+//   const { fullPath } = route

-  nextTick(() => {
-    router.replace({
-      path: '/redirect' + fullPath,
-    })
-  })
-}
+//   nextTick(() => {
+//     router.replace({
+//       path: '/redirect' + fullPath,
+//     })
+//   })
+// }
 function handleSetSize(size) {
  proxy.$modal.loading('正在设置布局大小，请稍候...')
-  store.dispatch('app/setSize', size)
+  appStore.setSize(size)
  setTimeout('window.location.reload()', 1000)
 }
 </script>
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@ -37,6 +37,9 @@ import { constantRoutes } from '@/router'
 import { isHttp } from '@/utils/validate'
 import { useRouter } from 'vue-router'
 import { getNormalPath } from '@/utils/ruoyi'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'

 // 顶部栏初始数
 const visibleNumber = ref(5)
@ -45,14 +48,16 @@ const isFrist = ref(false)
 // 当前激活菜单的 index
 const currentIndex = ref(undefined)

-const store = useStore()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
 const route = useRoute()
 const router = useRouter()

 // 主题颜色
-const theme = computed(() => store.state.settings.theme)
+const theme = computed(() => settingsStore.theme)
 // 所有的路由信息
-const routers = computed(() => store.state.permission.topbarRouters)
+const routers = computed(() => permissionStore.topbarRouters)

 // 顶部显示菜单
 const topMenus = computed(() => {
@ -153,7 +158,7 @@ function activeRoutes(key) {
    })
  }
  if (routes.length > 0) {
-    store.commit('SET_SIDEBAR_ROUTERS', routes)
+    permissionStore.setSidebarRouters(routes)
  }
  return routes
 }
--- a/src/directive/permission/hasPermi.js
+++ b/src/directive/permission/hasPermi.js
@ -1,28 +1,28 @@
 /**
- * v-hasPermi 操作权限处理
- * Copyright (c) 2019 ruoyi
- */
- 
-import store from '@/store'
+  * v-hasPermi 操作权限处理
+  * Copyright (c) 2019 ruoyi
+  */

-export default {
-  mounted(el, binding, vnode) {
-    const { value } = binding
-    const all_permission = "*:*:*";
-    const permissions = store.getters && store.getters.permissions
+ import useUserStore from '@/store/modules/user'

-    if (value && value instanceof Array && value.length > 0) {
-      const permissionFlag = value
+ export default {
+   mounted(el, binding, vnode) {
+     const { value } = binding
+     const all_permission = "*:*:*";
+     const permissions = useUserStore().permissions

-      const hasPermissions = permissions.some(permission => {
-        return all_permission === permission || permissionFlag.includes(permission)
-      })
+     if (value && value instanceof Array && value.length > 0) {
+       const permissionFlag = value

-      if (!hasPermissions) {
-        el.parentNode && el.parentNode.removeChild(el)
-      }
-    } else {
-      throw new Error(`请设置操作权限标签值`)
-    }
-  }
-}
+       const hasPermissions = permissions.some(permission => {
+         return all_permission === permission || permissionFlag.includes(permission)
+       })
+
+       if (!hasPermissions) {
+         el.parentNode && el.parentNode.removeChild(el)
+       }
+     } else {
+       throw new Error(`请设置操作权限标签值`)
+     }
+   }
+ }
--- a/src/directive/permission/hasRole.js
+++ b/src/directive/permission/hasRole.js
@ -3,13 +3,13 @@
 * Copyright (c) 2019 ruoyi
 */
 
-import store from '@/store'
+import useUserStore from '@/store/modules/user'

 export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const super_admin = "admin";
-    const roles = store.getters && store.getters.roles
+    const roles = useUserStore().roles

    if (value && value instanceof Array && value.length > 0) {
      const roleFlag = value
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@ -1,9 +1,10 @@
 import { createI18n } from 'vue-i18n'
-import store from '@/store/index'
+// import useAppStore from '@/store/modules/app'
 import { listLangByLocale } from '@/api/system/commonLang'
-
+import jsCookie from 'js-cookie'
 const language = computed(() => {
-  return store.getters.language
+  // return useAppStore().lang
+  return jsCookie.get('lang') || 'zh-cn'
 })

 import zhCn from './lang/zh-cn.json'
@ -23,7 +24,7 @@ const i18n = createI18n({
  // 全局注入 $t 函数
  globalInjection: true,
  fallbackLocale: 'zh-cn',
-  locale: store.getters.language, //默认选择的语言 
+  locale: language.value, //默认选择的语言 
  legacy: false, // 使用 Composition API 模式，则需要将其设置为false
  messages: {
    'zh-cn': {
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@ -10,9 +10,11 @@
  </el-main>
 </template>
 <script setup>
-const route = useRoute()
-const store = useStore()
+import useTagsViewStore from '@/store/modules/tagsView'
+// const route = useRoute()
+const tagsViewStore = useTagsViewStore()
+// tagsViewStore.addCachedView(route)
 const cachedViews = computed(() => {
-  return store.state.tagsView.cachedViews
+  return tagsViewStore.cachedViews
 })
 </script>
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -1,13 +1,13 @@
 <template>
-  <div class="navbar" :data-theme="sideTheme" :class="getters.device">
-    <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <template v-if="getters.device != 'mobile'">
-      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
-      <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
+  <div class="navbar" :data-theme="sideTheme" :class="appStore.device">
+    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <template v-if="appStore.device != 'mobile'">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
+      <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
    </template>

    <div class="right-menu">
-      <header-search id="header-search" class="right-menu-item" v-if="getters.device != 'mobile'" />
+      <header-search id="header-search" class="right-menu-item" v-if="appStore.device != 'mobile'" />
      <zr-git title="源码地址" class="right-menu-item" />
      <zr-doc title="文档地址" class="right-menu-item" />
      <screenfull title="全屏" class="right-menu-item" />
@ -17,8 +17,8 @@

      <el-dropdown @command="handleCommand" class="right-menu-item avatar-container" trigger="hover">
        <span class="avatar-wrapper">
-          <img :src="getters.avatar" class="user-avatar" />
-          <span class="name">{{ getters.name }}</span>
+          <img :src="userStore.avatar" class="user-avatar" />
+          <span class="name">{{ userStore.name }}</span>
          <el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
@ -50,13 +50,18 @@ import ZrGit from '@/components/Zr/Git'
 import ZrDoc from '@/components/Zr/Doc'
 import Notice from '@/components/Notice/Index'
 import LangSelect from '@/components/LangSelect/index'
+import useAppStore from '@/store/modules/app'
+import useUserStore from '@/store/modules/user'
+import useSettingsStore from '@/store/modules/settings'

 const { proxy } = getCurrentInstance()
-const store = useStore()
-const getters = computed(() => store.getters)
-const sideTheme = computed(() => store.state.settings.sideTheme)
+const appStore = useAppStore()
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+
+const sideTheme = computed(() => settingsStore.sideTheme)
 function toggleSideBar() {
-  store.dispatch('app/toggleSideBar')
+  appStore.toggleSideBar()
 }

 function handleCommand(command) {
@ -80,7 +85,7 @@ function logout() {
      type: 'warning',
    })
    .then(() => {
-      store.dispatch('LogOut').then(() => {
+      userStore.logOut().then(() => {
        location.href = '/index'
      })
    })
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@ -93,13 +93,18 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 import { useDark, useCycleList, useColorMode } from '@vueuse/core'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
 import { getLightColor } from '@/utils/index'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'

 const { proxy } = getCurrentInstance()
-const store = useStore()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
 const showSettings = ref(false)
-const theme = ref(store.state.settings.theme)
-const sideTheme = ref(store.state.settings.sideTheme)
-const storeSettings = computed(() => store.state.settings)
+const theme = ref(settingsStore.theme)
+const sideTheme = ref(settingsStore.sideTheme)
+const storeSettings = computed(() => settingsStore)
 const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])

 // 可以手动更改当前值 model.value = 'cafe'
@ -117,13 +122,10 @@ const isDark = useDark()
 const topNav = computed({
  get: () => storeSettings.value.topNav,
  set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'topNav',
-      value: val,
-    })
+    settingsStore.changeSetting({ key: 'topNav', value: val })
    if (!val) {
-      store.dispatch('app/toggleSideBarHide', false)
-      store.commit('SET_SIDEBAR_ROUTERS', store.state.permission.defaultRoutes)
+      appStore.toggleSideBarHide(false)
+      permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
    }
  },
 })
@ -131,50 +133,35 @@ const topNav = computed({
 const tagsView = computed({
  get: () => storeSettings.value.tagsView,
  set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'tagsView',
-      value: val,
-    })
+    settingsStore.changeSetting({ key: 'tagsView', value: val })
  },
 })
 /**是否需要固定头部 */
 const fixedHeader = computed({
  get: () => storeSettings.value.fixedHeader,
  set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'fixedHeader',
-      value: val,
-    })
+    settingsStore.changeSetting({ key: 'fixedHeader', value: val })
  },
 })
 // 是否显示底部
 const showFooter = computed({
  get: () => storeSettings.value.showFooter,
  set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'showFooter',
-      value: val,
-    })
+    settingsStore.changeSetting({ key: 'showFooter', value: val })
  },
 })
 /**是否需要侧边栏的logo */
 const sidebarLogo = computed({
  get: () => storeSettings.value.sidebarLogo,
  set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'sidebarLogo',
-      value: val,
-    })
+    settingsStore.changeSetting({ key: 'sidebarLogo', value: val })
  },
 })
 /**是否需要侧边栏的动态网页的title */
 const dynamicTitle = computed({
  get: () => storeSettings.value.dynamicTitle,
  set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'dynamicTitle',
-      value: val,
-    })
+    settingsStore.changeSetting({ key: 'dynamicTitle', value: val })
    // 动态设置网页标题
    useDynamicTitle()
  },
@ -216,10 +203,7 @@ watch(
 * 改变主题颜色
 */
 function themeChange(val) {
-  store.dispatch('settings/changeSetting', {
-    key: 'theme',
-    value: val,
-  })
+  settingsStore.changeSetting({ key: 'theme', value: val })
  theme.value = val
  // 设置element-plus ui主题
  document.documentElement.style.setProperty('--el-color-primary', val)
@ -230,10 +214,7 @@ function themeChange(val) {
  }
 }
 function handleTheme(val) {
-  store.dispatch('settings/changeSetting', {
-    key: 'sideTheme',
-    value: val,
-  })
+  settingsStore.changeSetting({ key: 'sideTheme', value: val })
  sideTheme.value = val
  const body = document.documentElement
  if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -15,6 +15,7 @@

 <script setup>
 import logo from '@/assets/logo/logo.png'
+import useSettingsStore from '@/store/modules/settings'

 defineProps({
  collapse: {
@ -24,8 +25,8 @@ defineProps({
 })

 const title = ref(import.meta.env.VITE_APP_TITLE)
-const store = useStore()
-const sideTheme = computed(() => store.state.settings.sideTheme)
+const settingsStore = useSettingsStore();
+const sideTheme = computed(() => settingsStore.sideTheme);
 </script>

 <style lang="scss" scoped>
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -20,15 +20,20 @@
 <script setup>
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'

 const route = useRoute()
-const store = useStore()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()

-const sidebarRouters = computed(() => store.getters.sidebarRouters)
-const showLogo = computed(() => store.state.settings.sidebarLogo)
-const sideTheme = computed(() => store.state.settings.sideTheme)
-const theme = computed(() => store.state.settings.theme)
-const isCollapse = computed(() => !store.state.app.sidebar.opened)
+const sidebarRouters = computed(() => permissionStore.sidebarRouters)
+const showLogo = computed(() => settingsStore.sidebarLogo)
+const sideTheme = computed(() => settingsStore.sideTheme)
+const theme = computed(() => settingsStore.theme)
+const isCollapse = computed(() => !appStore.sidebar.opened)

 const activeMenu = computed(() => {
  const { meta, path } = route
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@ -1,19 +1,16 @@
 <template>
-  <el-scrollbar
-    ref="scrollContainer"
-    :vertical="false"
-    class="scroll-container"
-    @wheel.prevent="handleScroll"
-  >
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
    <slot />
  </el-scrollbar>
 </template>

 <script setup>
-const tagAndTagSpacing = ref(4);
-const { proxy } = getCurrentInstance();
+import useTagsViewStore from '@/store/modules/tagsView'

-const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap$);
+const tagAndTagSpacing = ref(4)
+const { proxy } = getCurrentInstance()
+
+const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap$)

 onMounted(() => {
  scrollWrapper.value.addEventListener('scroll', emitScroll, true)
@ -24,7 +21,7 @@ onBeforeUnmount(() => {

 function handleScroll(e) {
  const eventDelta = e.wheelDelta || -e.deltaY * 40
-  const $scrollWrapper = scrollWrapper.value;
+  const $scrollWrapper = scrollWrapper.value
  $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
 }
 const emits = defineEmits()
@ -32,13 +29,13 @@ const emitScroll = () => {
  emits('scroll')
 }

-const store = useStore();
-const visitedViews = computed(() => store.state.tagsView.visitedViews);
+const tagsViewStore = useTagsViewStore()
+const visitedViews = computed(() => tagsViewStore.visitedViews)

 function moveToTarget(currentTag) {
  const $container = proxy.$refs.scrollContainer.$el
  const $containerWidth = $container.offsetWidth
-  const $scrollWrapper = scrollWrapper.value;
+  const $scrollWrapper = scrollWrapper.value

  let firstTag = null
  let lastTag = null
@ -54,17 +51,17 @@ function moveToTarget(currentTag) {
  } else if (lastTag === currentTag) {
    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
  } else {
-    const tagListDom = document.getElementsByClassName('tags-view-item');
-    const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
+    const tagListDom = document.getElementsByClassName('tags-view-item')
+    const currentIndex = visitedViews.value.findIndex((item) => item === currentTag)
    let prevTag = null
    let nextTag = null
    for (const k in tagListDom) {
      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
-          prevTag = tagListDom[k];
+          prevTag = tagListDom[k]
        }
        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
-          nextTag = tagListDom[k];
+          nextTag = tagListDom[k]
        }
      }
    }
@ -87,7 +84,7 @@ defineExpose({
 })
 </script>

-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .scroll-container {
  white-space: nowrap;
  position: relative;
@ -100,4 +97,4 @@ defineExpose({
    height: 49px;
  }
 }
-</style>
+</style>
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@ -37,6 +37,9 @@
 <script setup>
 import ScrollPane from './ScrollPane'
 import { getNormalPath } from '@/utils/ruoyi'
+import useTagsViewStore from '@/store/modules/tagsView'
+// import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'

 const visible = ref(false)
 const top = ref(0)
@ -46,13 +49,12 @@ const affixTags = ref([])
 const scrollPaneRef = ref(null)

 const { proxy } = getCurrentInstance()
-const store = useStore()
 const route = useRoute()
 const router = useRouter()

-const visitedViews = computed(() => store.state.tagsView.visitedViews)
-const routes = computed(() => store.state.permission.routes)
-// const theme = computed(() => store.state.settings.theme)
+const visitedViews = computed(() => useTagsViewStore().visitedViews)
+const routes = computed(() => usePermissionStore().routes)
+// const theme = computed(() => useSettingsStore().theme);

 watch(route, () => {
  addTags()
@ -124,14 +126,14 @@ function initTags() {
  for (const tag of res) {
    // Must have tag name
    if (tag.name) {
-      store.dispatch('tagsView/addVisitedView', tag)
+      useTagsViewStore().addVisitedView(tag)
    }
  }
 }
 function addTags() {
  const { name } = route
  if (name) {
-    store.dispatch('tagsView/addView', route)
+    useTagsViewStore().addView(route)
  }
  return false
 }
@ -142,7 +144,7 @@ function moveToCurrentTag() {
        scrollPaneRef.value.moveToTarget(r)
        // when query is different then update
        if (r.fullPath !== route.fullPath) {
-          store.dispatch('tagsView/updateVisitedView', route)
+          useTagsViewStore().updateVisitedView(route)
        }
      }
    }
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -33,25 +33,29 @@ import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
 import { Navbar, Settings, TagsView } from './components'
 import defaultSettings from '@/settings'
+
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import useTagsViewStore from '@/store/modules/tagsView'
 const menuDrawer = computed({
-  get: () => store.state.app.sidebar.opened,
+  get: () => useAppStore().sidebar.opened,
  set: (val) => {
-    store.dispatch('app/toggleSideBar')
+    useAppStore().toggleSideBar(val)
  },
 })
-let store = useStore()
-const theme = computed(() => store.state.settings.theme)
-const sidebar = computed(() => store.state.app.sidebar)
-const device = computed(() => store.state.app.device)
-const needTagsView = computed(() => store.state.settings.tagsView)
-const fixedHeader = computed(() => store.state.settings.fixedHeader)
-const showFooter = computed(() => store.state.settings.showFooter)
+const settingsStore = useSettingsStore()
+const theme = computed(() => settingsStore.theme)
+const sidebar = computed(() => useAppStore().sidebar)
+const device = computed(() => useAppStore().device)
+const needTagsView = computed(() => settingsStore.tagsView)
+const fixedHeader = computed(() => settingsStore.fixedHeader)
+const showFooter = computed(() => settingsStore.showFooter)

 // appMain 模块 start
 const route = useRoute()
-store.dispatch('tagsView/addCachedView', route)
+useTagsViewStore().addCachedView(route)
 const cachedViews = computed(() => {
-  return store.state.tagsView.cachedViews
+  return useTagsViewStore().cachedViews
 })
 //appMain 模块结束

@ -66,18 +70,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design

 watchEffect(() => {
  if (device.value === 'mobile' && sidebar.value.opened) {
-    // store.dispatch('app/closeSideBar')
+    // useAppStore().closeSideBar()
  }
  if (width.value - 1 < WIDTH) {
-    store.dispatch('app/toggleDevice', 'mobile')
-    // store.dispatch('app/closeSideBar')
+    useAppStore().toggleDevice('mobile')
+    // useAppStore().closeSideBar()
  } else {
-    store.dispatch('app/toggleDevice', 'desktop')
+    useAppStore().toggleDevice('desktop')
  }
 })

 function handleClickOutside() {
-  store.dispatch('app/closeSideBar')
+  useAppStore().closeSideBar()
 }

 const settingRef = ref(null)
--- a/src/main.js
+++ b/src/main.js
@ -6,7 +6,6 @@ import 'dayjs/locale/zh-cn'
 import '@/assets/styles/index.scss' // global css

 import App from './App'
-import store from './store'
 import router from './router'
 import directive from './directive' // directive
 // 注册指令
@ -65,6 +64,7 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('svg-icon', SvgIcon)

+const store = createPinia()
 app.use(router)
 app.use(store)
 app.use(plugins)
--- a/src/permission.js
+++ b/src/permission.js
@ -1,11 +1,12 @@
 import router from './router'
-import store from './store'
 import { ElMessage } from 'element-plus'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { getToken } from '@/utils/auth'
 import { isHttp } from '@/utils/validate'
-
+import useUserStore from '@/store/modules/user'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
 NProgress.configure({ showSpinner: false });

 const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
@ -13,16 +14,16 @@ const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
 router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+    to.meta.title && useSettingsStore().setTitle(to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
-      if (store.getters.roles.length === 0) {
+      if (useUserStore().roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+        useUserStore().getInfo().then(() => {
+          usePermissionStore().generateRoutes().then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            accessRoutes.forEach(route => {
              if (!isHttp(route.path)) {
@ -32,7 +33,7 @@ router.beforeEach((to, from, next) => {
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
-          store.dispatch('LogOut').then(() => {
+          useUserStore().logOut().then(() => {
            ElMessage.error(err != undefined ? err : '登录失败')
            next({ path: '/' })
          })
--- a/src/plugins/auth.js
+++ b/src/plugins/auth.js
@ -1,8 +1,8 @@
-import store from '@/store'
+import useUserStore from '@/store/modules/user'

 function authPermission(permission) {
  const all_permission = "*:*:*";
-  const permissions = store.getters && store.getters.permissions
+  const permissions = useUserStore() && useUserStore().permissions
  if (permission && permission.length > 0) {
    return permissions.some(v => {
      return all_permission === v || v === permission
@ -14,7 +14,7 @@ function authPermission(permission) {

 function authRole(role) {
  const super_admin = "admin";
-  const roles = store.getters && store.getters.roles
+  const roles = useUserStore().roles
  if (role && role.length > 0) {
    return roles.some(v => {
      return super_admin === v || v === role
@ -57,4 +57,4 @@ export default {
      return authRole(item)
    })
  }
-}
+}
--- a/src/plugins/tab.js
+++ b/src/plugins/tab.js
@ -1,4 +1,4 @@
-import store from '@/store'
+import useTagsViewStore from '@/store/modules/tagsView'
 import router from '@/router'

 export default {
@ -14,7 +14,7 @@ export default {
        }
      });
    }
-    return store.dispatch('tagsView/delCachedView', obj).then(() => {
+    return useTagsViewStore().delCachedView(obj).then(() => {
      const { path, query } = obj
      router.replace({
        path: '/redirect' + path,
@ -24,7 +24,7 @@ export default {
  },
  // 关闭当前tab页签，打开新页签
  closeOpenPage(obj) {
-    store.dispatch("tagsView/delView", router.currentRoute.value);
+    useTagsViewStore().delView(router.currentRoute.value);
    if (obj !== undefined) {
      return router.push(obj);
    }
@ -32,27 +32,27 @@ export default {
  // 关闭指定tab页签
  closePage(obj) {
    if (obj === undefined) {
-      return store.dispatch('tagsView/delView', router.currentRoute.value).then(({ lastPath }) => {
+      return useTagsViewStore().delView(router.currentRoute.value).then(({ lastPath }) => {
        return router.push(lastPath || '/index');
      });
    }
-    return store.dispatch('tagsView/delView', obj);
+    return useTagsViewStore().delView(obj);
  },
  // 关闭所有tab页签
  closeAllPage() {
-    return store.dispatch('tagsView/delAllViews');
+    return useTagsViewStore().delAllViews();
  },
  // 关闭左侧tab页签
  closeLeftPage(obj) {
-    return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute.value);
+    return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
  },
  // 关闭右侧tab页签
  closeRightPage(obj) {
-    return store.dispatch('tagsView/delRightTags', obj || router.currentRoute.value);
+    return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
  },
  // 关闭其他tab页签
  closeOtherPage(obj) {
-    return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute.value);
+    return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
  },
  // 打开tab页签
  openPage(url) {
@ -60,6 +60,6 @@ export default {
  },
  // 修改tab页签
  updatePage(obj) {
-    return store.dispatch('tagsView/updateVisitedView', obj);
+    return useTagsViewStore().updateVisitedView(obj);
  }
 }
--- a/src/store/getters.js
+++ b/src/store/getters.js
@ -1,25 +0,0 @@
-const getters = {
-  sidebar: state => state.app.sidebar,
-  size: state => state.app.size,
-  device: state => state.app.device,
-  language: state => state.app.lang,
-  visitedViews: state => state.tagsView.visitedViews,
-  cachedViews: state => state.tagsView.cachedViews,
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  userId: state => state.user.userInfo.userId,
-  introduction: state => state.user.introduction,
-  roles: state => state.user.roles,
-  permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes,
-  userinfo: state => state.user.userInfo,
-  topbarRouters: state => state.permission.topbarRouters,
-  defaultRoutes: state => state.permission.defaultRoutes,
-  sidebarRouters: state => state.permission.sidebarRouters,
-  onlineUserNum: state => state.socket.onlineNum,
-  noticeList: state => state.socket.noticeList,
-  noticeDot: state => state.socket.noticeList.length > 0,
-  onlineUsers: state => state.socket.onlineUsers
-}
-export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,23 +1,3 @@
-import { createStore } from 'vuex'
-import app from './modules/app'
-import user from './modules/user'
-import tagsView from './modules/tagsView'
-import permission from './modules/permission'
-import settings from './modules/settings'
-import getters from './getters'
-import socket from './modules/socket'
-
-const store = createStore({
-  modules: {
-    app,
-    user,
-    tagsView,
-    permission,
-    settings,
-    socket
-  },
-  getters
-});
-
+const store = createPinia()

 export default store
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@ -1,75 +1,122 @@
 import Cookies from 'js-cookie'

-const state = {
-  sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
-    withoutAnimation: false,
-    hide: false
-  },
-  device: 'desktop',
-  size: Cookies.get('size') || 'small',
-  lang: Cookies.get('lang') || 'zh-cn'
-}
+// const state = {
+//   sidebar: {
+//     opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+//     withoutAnimation: false,
+//     hide: false
+//   },
+//   device: 'desktop',
+//   size: Cookies.get('size') || 'small',
+//   lang: Cookies.get('lang') || 'zh-cn'
+// }

-const mutations = {
-  TOGGLE_SIDEBAR: state => {
-    if (state.sidebar.hide) {
-      return false;
-    }
-    state.sidebar.opened = !state.sidebar.opened
-    state.sidebar.withoutAnimation = true
+// const mutations = {
+//   TOGGLE_SIDEBAR: state => {
+//     if (state.sidebar.hide) {
+//       return false;
+//     }
+//     state.sidebar.opened = !state.sidebar.opened
+//     state.sidebar.withoutAnimation = true

-    if (state.sidebar.opened) {
-      Cookies.set('sidebarStatus', 1)
-    } else {
+//     if (state.sidebar.opened) {
+//       Cookies.set('sidebarStatus', 1)
+//     } else {
+//       Cookies.set('sidebarStatus', 0)
+//     }
+//   },
+//   CLOSE_SIDEBAR: (state, withoutAnimation) => {
+//     Cookies.set('sidebarStatus', 0)
+//     state.sidebar.opened = false
+//     state.sidebar.withoutAnimation = withoutAnimation
+//   },
+//   TOGGLE_DEVICE: (state, device) => {
+//     state.device = device
+//   },
+//   SET_SIZE: (state, size) => {
+//     state.size = size
+//     Cookies.set('size', size)
+//   },
+//   SET_SIDEBAR_HIDE: (state, status) => {
+//     state.sidebar.hide = status
+//   },
+//   SET_LANG: (state, lang) => {
+//     state.lang = lang
+//     Cookies.set('lang', lang)
+//   },
+// }
+
+// const actions = {
+//   toggleSideBar({ commit }) {
+//     commit('TOGGLE_SIDEBAR')
+//   },
+//   closeSideBar({ commit }) {
+//     commit('CLOSE_SIDEBAR', '')
+//   },
+//   toggleDevice({ commit }, device) {
+//     commit('TOGGLE_DEVICE', device)
+//   },
+//   setSize({ commit }, size) {
+//     commit('SET_SIZE', size)
+//   },
+//   toggleSideBarHide({ commit }, status) {
+//     commit('SET_SIDEBAR_HIDE', status)
+//   },
+//   setLang({ commit }, lang) {
+//     commit('SET_LANG', lang)
+//   },
+// }
+
+// export default {
+//   namespaced: true,
+//   state,
+//   mutations,
+//   actions
+// }
+const useAppStore = defineStore('app', {
+  state: () => ({
+    sidebar: {
+      opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+      withoutAnimation: false,
+      hide: false
+    },
+    device: 'desktop',
+    size: Cookies.get('size') || 'small',
+    lang: Cookies.get('lang') || 'zh-cn'
+  }),
+  actions: {
+    toggleSideBar(withoutAnimation) {
+      if (this.sidebar.hide) {
+        return false
+      }
+      this.sidebar.opened = !this.sidebar.opened
+      this.sidebar.withoutAnimation = withoutAnimation
+      if (this.sidebar.opened) {
+        Cookies.set('sidebarStatus', 1)
+      } else {
+        Cookies.set('sidebarStatus', 0)
+      }
+    },
+    closeSideBar(withoutAnimation) {
      Cookies.set('sidebarStatus', 0)
+      this.sidebar.opened = false
+      this.sidebar.withoutAnimation = withoutAnimation
+    },
+    toggleDevice(device) {
+      this.device = device
+    },
+    setSize(size) {
+      this.size = size;
+      Cookies.set('size', size)
+    },
+    toggleSideBarHide(status) {
+      this.sidebar.hide = status
+    },
+    setLang(lang) {
+      this.lang = lang
+      Cookies.set('lang', lang)
    }
-  },
-  CLOSE_SIDEBAR: (state, withoutAnimation) => {
-    Cookies.set('sidebarStatus', 0)
-    state.sidebar.opened = false
-    state.sidebar.withoutAnimation = withoutAnimation
-  },
-  TOGGLE_DEVICE: (state, device) => {
-    state.device = device
-  },
-  SET_SIZE: (state, size) => {
-    state.size = size
-    Cookies.set('size', size)
-  },
-  SET_SIDEBAR_HIDE: (state, status) => {
-    state.sidebar.hide = status
-  },
-  SET_LANG: (state, lang) => {
-    state.lang = lang
-    Cookies.set('lang', lang)
-  },
-}
+  }
+})

-const actions = {
-  toggleSideBar({ commit }) {
-    commit('TOGGLE_SIDEBAR')
-  },
-  closeSideBar({ commit }) {
-    commit('CLOSE_SIDEBAR', '')
-  },
-  toggleDevice({ commit }, device) {
-    commit('TOGGLE_DEVICE', device)
-  },
-  setSize({ commit }, size) {
-    commit('SET_SIZE', size)
-  },
-  toggleSideBarHide({ commit }, status) {
-    commit('SET_SIDEBAR_HIDE', status)
-  },
-  setLang({ commit }, lang) {
-    commit('SET_LANG', lang)
-  },
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+export default useAppStore
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@ -8,30 +8,29 @@ import InnerLink from '@/layout/components/InnerLink'
 const modules =
  import.meta.glob('./../../views/**/*.vue')

-const permission = {
-  state: {
+const usePermissionStore = defineStore('permission', {
+  state: () => ({
    routes: [],
    defaultRoutes: [],
    topbarRouters: [],
-		sidebarRouters: []
-  },
-  mutations: {
-    SET_ROUTES: (state, routes) => {
-			state.routes = constantRoutes.concat(routes)
-    },
-    SET_DEFAULT_ROUTES: (state, routes) => {
-      state.defaultRoutes = constantRoutes.concat(routes)
-    },
-    SET_TOPBAR_ROUTES: (state, routes) => {
-      state.topbarRouters = routes
-    },
-    SET_SIDEBAR_ROUTERS: (state, routes) => {
-      state.sidebarRouters = routes
-    },
-  },
+    sidebarRouters: []
+  }),
  actions: {
+    setRoutes(routes) {
+      this.addRoutes = routes
+      this.routes = constantRoutes.concat(routes)
+    },
+    setDefaultRoutes(routes) {
+      this.defaultRoutes = constantRoutes.concat(routes)
+    },
+    setTopbarRoutes(routes) {
+      this.topbarRouters = routes
+    },
+    setSidebarRouters(routes) {
+      this.sidebarRouters = routes
+    },
    // 生成路由
-    GenerateRoutes({ commit }) {
+    generateRoutes() {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters().then(res => {
@ -41,16 +40,16 @@ const permission = {
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          //const defaultRoutes = filterAsyncRouter(defaultData)
-          commit('SET_ROUTES', rewriteRoutes)
-          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
-          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
+          this.setRoutes(rewriteRoutes)
+          this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
+          this.setDefaultRoutes(sidebarRoutes)
+          this.setTopbarRoutes(sidebarRoutes)
          resolve(rewriteRoutes)
        })
      })
    }
  }
-}
+})

 // 遍历后台传来的路由字符串，转换为组件对象
 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
@ -117,4 +116,4 @@ export const loadView = (view) => {
  return res;
 }

-export default permission
+export default usePermissionStore
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@ -4,41 +4,58 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
 const { sideTheme, theme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle, showFooter } = defaultSettings

 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
-const state = {
-  title: '',
-  theme: storageSetting.theme || theme,
-  sideTheme: storageSetting.sideTheme || sideTheme,
-  showSettings: showSettings,
-  topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
-  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
-  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
-  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
-  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
-  showFooter: storageSetting.showFooter === undefined ? showFooter : storageSetting.showFooter
-}
-const mutations = {
-  CHANGE_SETTING: (state, { key, value }) => {
-    if (state.hasOwnProperty(key)) {
-      state[key] = value
+const useSettingsStore = defineStore('settings', {
+  state: () => ({
+    title: '',
+    theme: storageSetting.theme || theme,
+    sideTheme: storageSetting.sideTheme || sideTheme,
+    showSettings: showSettings,
+    topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
+    tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
+    fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
+    sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
+    dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
+    showFooter: storageSetting.showFooter === undefined ? showFooter : storageSetting.showFooter
+  }),
+  actions: {
+    // 修改布局设置
+    changeSetting(data) {
+      const { key, value } = data
+      if (this.hasOwnProperty(key)) {
+        this[key] = value
+      }
+    },
+    // 设置网页标题
+    setTitle(title) {
+      this.title = title
+      useDynamicTitle();
    }
  }
-}
+})
+export default useSettingsStore
+// const mutations = {
+//   CHANGE_SETTING: (state, { key, value }) => {
+//     if (state.hasOwnProperty(key)) {
+//       state[key] = value
+//     }
+//   }
+// }

-const actions = {
-  // 修改布局设置
-  changeSetting({ commit }, data) {
-    commit('CHANGE_SETTING', data)
-  },
-  // 设置网页标题
-  setTitle({ commit }, title) {
-    state.title = title
-    useDynamicTitle();
-  }
-}
+// const actions = {
+//   // 修改布局设置
+//   changeSetting({ commit }, data) {
+//     commit('CHANGE_SETTING', data)
+//   },
+//   // 设置网页标题
+//   setTitle({ commit }, title) {
+//     state.title = title
+//     useDynamicTitle();
+//   }
+// }

-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+// export default {
+//   namespaced: true,
+//   state,
+//   mutations,
+//   actions
+// }
--- a/src/store/modules/socket.js
+++ b/src/store/modules/socket.js
@ -1,37 +1,23 @@
-const state = {
-  onlineNum: 0,
-  onlineUsers: [],
-  noticeList: []
-}
-const mutations = {
-  SET_ONLINEUSER_NUM: (state, num) => {
-    state.onlineNum = num
-  },
-  SET_NOTICE_list: (state, data) => {
-    state.noticeList = data;
-  },
-  SET_ONLINE_USERS: (state, data) => {
-    state.onlineUsers = data;
+const useSocketStore = defineStore('socket', {
+  state: () => ({
+    onlineNum: 0,
+    onlineUsers: [],
+    noticeList: [],
+    noticeDot: false
+  }),
+  actions: {
+    //更新在线人数
+    setOnlineUserNum(num) {
+      this.onlineNum = num
+    },
+    // 更新系统通知
+    setNoticeList(data) {
+      this.noticeList = data
+      this.noticeDot = data.length > 0
+    },
+    setOnlineUsers(data) {
+      this.onlineUsers = data
+    }
  }
-}
-
-const actions = {
-  //更新在线人数
-  changeOnlineNum({ commit }, data) {
-    commit('SET_ONLINEUSER_NUM', data)
-  },
-  // 更新系统通知
-  getNoticeList({ commit }, data) {
-    commit('SET_NOTICE_list', data)
-  },
-  getOnlineUsers({ commit }, data) {
-    commit('SET_ONLINE_USERS', data)
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+})
+export default useSocketStore
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@ -1,207 +1,156 @@
-const state = {
-  visitedViews: [],
-  cachedViews: []
-}
-
-const mutations = {
-  ADD_VISITED_VIEW: (state, view) => {
-    if (state.visitedViews.some(v => v.path === view.path)) return
-    state.visitedViews.push(
-      Object.assign({}, view, {
-        title: view.meta.title || 'no-name'
-      })
-    )
-  },
-  ADD_CACHED_VIEW: (state, view) => {
-    if (state.cachedViews.includes(view.name)) return
-    if (!view.meta.noCache) {
-      state.cachedViews.push(view.name)
-    }
-  },
-
-  DEL_VISITED_VIEW: (state, view) => {
-    for (const [i, v] of state.visitedViews.entries()) {
-      if (v.path === view.path) {
-        state.visitedViews.splice(i, 1)
-        break
+const useTagsViewStore = defineStore(
+  'tagsView',
+  {
+    state: () => ({
+      visitedViews: [],
+      cachedViews: []
+    }),
+    actions: {
+      addView(view) {
+        this.addVisitedView(view)
+        this.addCachedView(view)
+      },
+      addVisitedView(view) {
+        if (this.visitedViews.some(v => v.path === view.path)) return
+        this.visitedViews.push(
+          Object.assign({}, view, {
+            title: view.meta.title || 'no-name'
+          })
+        )
+      },
+      addCachedView(view) {
+        if (this.cachedViews.includes(view.name)) return
+        if (!view.meta.noCache) {
+          this.cachedViews.push(view.name)
+        }
+      },
+      delView(view) {
+        return new Promise(resolve => {
+          this.delVisitedView(view)
+          this.delCachedView(view)
+          resolve({
+            visitedViews: [...this.visitedViews],
+            cachedViews: [...this.cachedViews]
+          })
+        })
+      },
+      delVisitedView(view) {
+        return new Promise(resolve => {
+          for (const [i, v] of this.visitedViews.entries()) {
+            if (v.path === view.path) {
+              this.visitedViews.splice(i, 1)
+              break
+            }
+          }
+          resolve([...this.visitedViews])
+        })
+      },
+      delCachedView(view) {
+        return new Promise(resolve => {
+          const index = this.cachedViews.indexOf(view.name)
+          index > -1 && this.cachedViews.splice(index, 1)
+          resolve([...this.cachedViews])
+        })
+      },
+      delOthersViews(view) {
+        return new Promise(resolve => {
+          this.delOthersVisitedViews(view)
+          this.delOthersCachedViews(view)
+          resolve({
+            visitedViews: [...this.visitedViews],
+            cachedViews: [...this.cachedViews]
+          })
+        })
+      },
+      delOthersVisitedViews(view) {
+        return new Promise(resolve => {
+          this.visitedViews = this.visitedViews.filter(v => {
+            return v.meta.affix || v.path === view.path
+          })
+          resolve([...this.visitedViews])
+        })
+      },
+      delOthersCachedViews(view) {
+        return new Promise(resolve => {
+          const index = this.cachedViews.indexOf(view.name)
+          if (index > -1) {
+            this.cachedViews = this.cachedViews.slice(index, index + 1)
+          } else {
+            this.cachedViews = []
+          }
+          resolve([...this.cachedViews])
+        })
+      },
+      delAllViews(view) {
+        return new Promise(resolve => {
+          this.delAllVisitedViews(view)
+          this.delAllCachedViews(view)
+          resolve({
+            visitedViews: [...this.visitedViews],
+            cachedViews: [...this.cachedViews]
+          })
+        })
+      },
+      delAllVisitedViews(view) {
+        return new Promise(resolve => {
+          const affixTags = this.visitedViews.filter(tag => tag.meta.affix)
+          this.visitedViews = affixTags
+          resolve([...this.visitedViews])
+        })
+      },
+      delAllCachedViews(view) {
+        return new Promise(resolve => {
+          this.cachedViews = []
+          resolve([...this.cachedViews])
+        })
+      },
+      updateVisitedView(view) {
+        for (let v of this.visitedViews) {
+          if (v.path === view.path) {
+            v = Object.assign(v, view)
+            break
+          }
+        }
+      },
+      delRightTags(view) {
+        return new Promise(resolve => {
+          const index = this.visitedViews.findIndex(v => v.path === view.path)
+          if (index === -1) {
+            return
+          }
+          this.visitedViews = this.visitedViews.filter((item, idx) => {
+            if (idx <= index || (item.meta && item.meta.affix)) {
+              return true
+            }
+            const i = this.cachedViews.indexOf(item.name)
+            if (i > -1) {
+              this.cachedViews.splice(i, 1)
+            }
+            return false
+          })
+          resolve([...this.visitedViews])
+        })
+      },
+      delLeftTags(view) {
+        return new Promise(resolve => {
+          const index = this.visitedViews.findIndex(v => v.path === view.path)
+          if (index === -1) {
+            return
+          }
+          this.visitedViews = this.visitedViews.filter((item, idx) => {
+            if (idx >= index || (item.meta && item.meta.affix)) {
+              return true
+            }
+            const i = this.cachedViews.indexOf(item.name)
+            if (i > -1) {
+              this.cachedViews.splice(i, 1)
+            }
+            return false
+          })
+          resolve([...this.visitedViews])
+        })
      }
    }
-  },
-  DEL_CACHED_VIEW: (state, view) => {
-    const index = state.cachedViews.indexOf(view.name)
-    index > -1 && state.cachedViews.splice(index, 1)
-  },
+  })

-  DEL_OTHERS_VISITED_VIEWS: (state, view) => {
-    state.visitedViews = state.visitedViews.filter(v => {
-      return v.meta.affix || v.path === view.path
-    })
-  },
-  DEL_OTHERS_CACHED_VIEWS: (state, view) => {
-    const index = state.cachedViews.indexOf(view.name)
-    if (index > -1) {
-      state.cachedViews = state.cachedViews.slice(index, index + 1)
-    } else {
-      state.cachedViews = []
-    }
-  },
-
-  DEL_ALL_VISITED_VIEWS: state => {
-    // keep affix tags
-    const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
-    state.visitedViews = affixTags
-  },
-  DEL_ALL_CACHED_VIEWS: state => {
-    state.cachedViews = []
-  },
-
-  UPDATE_VISITED_VIEW: (state, view) => {
-    for (let v of state.visitedViews) {
-      if (v.path === view.path) {
-        v = Object.assign(v, view)
-        break
-      }
-    }
-  },
-  
-  DEL_RIGHT_VIEWS: (state, view) => {
-    const index = state.visitedViews.findIndex(v => v.path === view.path)
-    if (index === -1) {
-      return
-    }
-    state.visitedViews = state.visitedViews.filter((item, idx) => {
-      if (idx <= index || (item.meta && item.meta.affix)) {
-        return true
-      }
-      const i = state.cachedViews.indexOf(item.name)
-      if (i > -1) {
-        state.cachedViews.splice(i, 1)
-      }
-      return false
-    })
-  },
-
-  DEL_LEFT_VIEWS: (state, view) => {
-    const index = state.visitedViews.findIndex(v => v.path === view.path)
-    if (index === -1) {
-      return
-    }
-    state.visitedViews = state.visitedViews.filter((item, idx) => {
-      if (idx >= index || (item.meta && item.meta.affix)) {
-        return true
-      }
-      const i = state.cachedViews.indexOf(item.name)
-      if (i > -1) {
-        state.cachedViews.splice(i, 1)
-      }
-      return false
-    })
-  }
-}
-
-const actions = {
-  addView({ dispatch }, view) {
-    dispatch('addVisitedView', view)
-    dispatch('addCachedView', view)
-  },
-  addVisitedView({ commit }, view) {
-    commit('ADD_VISITED_VIEW', view)
-  },
-  addCachedView({ commit }, view) {
-    commit('ADD_CACHED_VIEW', view)
-  },
-
-  delView({ dispatch, state }, view) {
-    return new Promise(resolve => {
-      dispatch('delVisitedView', view)
-      dispatch('delCachedView', view)
-      resolve({
-        visitedViews: [...state.visitedViews],
-        cachedViews: [...state.cachedViews]
-      })
-    })
-  },
-  delVisitedView({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_VISITED_VIEW', view)
-      resolve([...state.visitedViews])
-    })
-  },
-  delCachedView({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_CACHED_VIEW', view)
-      resolve([...state.cachedViews])
-    })
-  },
-
-  delOthersViews({ dispatch, state }, view) {
-    return new Promise(resolve => {
-      dispatch('delOthersVisitedViews', view)
-      dispatch('delOthersCachedViews', view)
-      resolve({
-        visitedViews: [...state.visitedViews],
-        cachedViews: [...state.cachedViews]
-      })
-    })
-  },
-  delOthersVisitedViews({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_OTHERS_VISITED_VIEWS', view)
-      resolve([...state.visitedViews])
-    })
-  },
-  delOthersCachedViews({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_OTHERS_CACHED_VIEWS', view)
-      resolve([...state.cachedViews])
-    })
-  },
-
-  delAllViews({ dispatch, state }, view) {
-    return new Promise(resolve => {
-      dispatch('delAllVisitedViews', view)
-      dispatch('delAllCachedViews', view)
-      resolve({
-        visitedViews: [...state.visitedViews],
-        cachedViews: [...state.cachedViews]
-      })
-    })
-  },
-  delAllVisitedViews({ commit, state }) {
-    return new Promise(resolve => {
-      commit('DEL_ALL_VISITED_VIEWS')
-      resolve([...state.visitedViews])
-    })
-  },
-  delAllCachedViews({ commit, state }) {
-    return new Promise(resolve => {
-      commit('DEL_ALL_CACHED_VIEWS')
-      resolve([...state.cachedViews])
-    })
-  },
-
-  updateVisitedView({ commit }, view) {
-    commit('UPDATE_VISITED_VIEW', view)
-  },
-
-  delRightTags({ commit }, view) {
-    return new Promise(resolve => {
-      commit('DEL_RIGHT_VIEWS', view)
-      resolve([...state.visitedViews])
-    })
-  },
-
-  delLeftTags({ commit }, view) {
-    return new Promise(resolve => {
-      commit('DEL_LEFT_VIEWS', view)
-      resolve([...state.visitedViews])
-    })
-  },
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+export default useTagsViewStore
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@ -2,40 +2,19 @@ import { login, logout, getInfo } from '@/api/system/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'

-const user = {
-  state: {
+const useUserStore = defineStore('user', {
+  state: () => ({
    userInfo: '',
    token: getToken(),
    name: '',
    avatar: '',
    roles: [],
-    permissions: []
-  },
-
-  mutations: {
-    SET_TOKEN: (state, token) => {
-      state.token = token
-    },
-    SET_NAME: (state, name) => {
-      state.name = name
-    },
-    SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
-    },
-    SET_ROLES: (state, roles) => {
-      state.roles = roles
-    },
-    SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
-    },
-    SET_USERINFO: (state, value) => {
-      state.userInfo = value
-    }
-  },
-
+    permissions: [],
+    userId: 0
+  }),
  actions: {
    // 登录
-    Login({ commit }, userInfo) {
+    login(userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
@ -44,8 +23,7 @@ const user = {
        login(username, password, code, uuid).then(res => {
          if (res.code == 200) {
            setToken(res.data)
-            //提交上面的mutaions方法
-            commit('SET_TOKEN', res.data)
+            this.token = res.data
            resolve() //then处理
          } else {
            console.log('login error ', res)
@ -55,25 +33,24 @@ const user = {
          reject(error)
        })
      })
-    },
-
-    // 获取用户信息
-    GetInfo({ commit, state }) {
+    }, // 获取用户信息
+    getInfo() {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          const data = res.data
          const avatar = data.user.avatar == "" ? defAva : data.user.avatar;

          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', data.roles)
-            commit('SET_PERMISSIONS', data.permissions)
+            this.roles = data.roles
+            this.permissions = data.permissions
          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
+            this.roles = ['ROLE_DEFAULT']
          }

-          commit('SET_NAME', data.user.nickName)
-          commit('SET_AVATAR', avatar)
-          commit('SET_USERINFO', data.user) //新加
+          this.name = data.user.nickName
+          this.avatar = avatar
+					this.userInfo = data.user //新加
+					this.userId = data.user.userId//新加
          resolve(res)
        }).catch(error => {
          console.error(error);
@ -81,14 +58,13 @@ const user = {
        })
      })
    },
-
    // 退出系统
-    LogOut({ commit, state }) {
+    logOut() {
      return new Promise((resolve, reject) => {
-        logout(state.token).then((res) => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
+        logout(this.token).then((res) => {
+          this.token = ''
+          this.roles = []
+          this.permissions = []
          removeToken()
          resolve(res)
        }).catch(error => {
@ -96,16 +72,14 @@ const user = {
        })
      })
    },
-
    // 前端 登出
-    FedLogOut({ commit }) {
+    fedLogOut() {
      return new Promise(resolve => {
-        commit('SET_TOKEN', '')
+        this.token = ''
        removeToken()
        resolve()
      })
    }
  }
-}
-
-export default user
+})
+export default useUserStore
--- a/src/utils/dynamicTitle.js
+++ b/src/utils/dynamicTitle.js
@ -1,12 +1,14 @@
 import store from '@/store'
 import defaultSettings from '@/settings'
+import useSettingsStore from '@/store/modules/settings'

 /**
 * 动态修改标题
 */
 export function useDynamicTitle() {
-  if (store.state.settings.dynamicTitle) {
-    document.title = store.state.settings.title + ' - ' + defaultSettings.title;
+  const settingsStore = useSettingsStore()
+  if (settingsStore.dynamicTitle) {
+    document.title = settingsStore.title + ' - ' + defaultSettings.title;
  } else {
    document.title = defaultSettings.title;
  }
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@ -1,51 +0,0 @@
-import store from '@/store'
-
-/**
- * 字符权限校验
- * @param {Array} value 校验值
- * @returns {Boolean}
- */
-export function checkPermi(value) {
-  if (value && value instanceof Array && value.length > 0) {
-    const permissions = store.getters && store.getters.permissions
-    const permissionDatas = value
-    const all_permission = "*:*:*";
-
-    const hasPermission = permissions.some(permission => {
-      return all_permission === permission || permissionDatas.includes(permission)
-    })
-
-    if (!hasPermission) {
-      return false
-    }
-    return true
-  } else {
-    console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
-    return false
-  }
-}
-
-/**
- * 角色权限校验
- * @param {Array} value 校验值
- * @returns {Boolean}
- */
-export function checkRole(value) {
-  if (value && value instanceof Array && value.length > 0) {
-    const roles = store.getters && store.getters.roles
-    const permissionRoles = value
-    const super_admin = "admin";
-
-    const hasRole = roles.some(role => {
-      return super_admin === role || permissionRoles.includes(role)
-    })
-
-    if (!hasRole) {
-      return false
-    }
-    return true
-  } else {
-    console.error(`need roles! Like checkRole="['admin','editor']"`)
-    return false
-  }
-}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -1,7 +1,7 @@
 import axios from 'axios'
 import { ElMessageBox, ElMessage } from 'element-plus'
-import store from '@/store'
 import { getToken } from '@/utils/auth'
+import useUserStore from '@/store/modules/user'

 // 解决后端跨域获取不到cookie问题
 // axios.defaults.withCredentials = true
@ -20,7 +20,7 @@ service.interceptors.request.use(config => {
  if (getToken()) {
    //将token放到请求头发送给服务器,将tokenkey放在请求头中
    config.headers['Authorization'] = 'Bearer ' + getToken();
-    config.headers['userid'] = store.getters.userId;
+    config.headers['userid'] = useUserStore().userId;
  }
  return config;
 }, error => {
@ -46,7 +46,7 @@ service.interceptors.response.use(res => {
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
-        store.dispatch('LogOut').then(() => {
+        useUserStore().logOut().then(() => {
          location.href =
            import.meta.env.VITE_APP_ROUTER_PREFIX + 'index';
        })
--- a/src/utils/signalR.js
+++ b/src/utils/signalR.js
@ -1,10 +1,9 @@
 // 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
 import * as signalR from '@microsoft/signalr'
-import store from '../store'
 import { getToken } from '@/utils/auth'
 import { ElNotification } from 'element-plus'
 import { useWebNotification } from '@vueuse/core'
-
+import useSocketStore from '@/store/modules/socket'
 export default {
  // signalR对象
  SR: {},
@ -49,8 +48,8 @@ export default {
      return true
    } catch (error) {
      that.failNum--;
-      console.log(`失败重试剩余次数${that.failNum}`, error)
-      if (that.failNum > 0) {
+      // console.log(`失败重试剩余次数${that.failNum}`, error)
+      if (that.failNum > 0 && this.SR.state.Disconnected) {
        setTimeout(async () => {
          await this.SR.start()
        }, 5000)
@ -61,11 +60,10 @@ export default {
  // 接收消息处理
  receiveMsg(connection) {
    connection.on("onlineNum", (data) => {
-      store.dispatch("socket/changeOnlineNum", data);
+			useSocketStore().setOnlineUserNum(data)
    });
    // 接收欢迎语
    connection.on("welcome", (data) => {
-      console.log('welcome', data)
      ElNotification.info(data)
    });
    // 接收后台手动推送消息
@ -91,13 +89,13 @@ export default {
    // 接收系统通知/公告
    connection.on("moreNotice", (data) => {
      if (data.code == 200) {
-        store.dispatch("socket/getNoticeList", data.data);
+				useSocketStore().setNoticeList(data.data)
      }
    })

    // 接收在线用户
    connection.on("onlineUser", (data) => {
-      store.dispatch("socket/getOnlineUsers", data);
+			useSocketStore().setOnlineUsers(data)
    })
  }
 }
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@ -49,13 +49,14 @@

 <script setup>
 import { CountUp } from 'countup.js'
+import useSocketStore from '@/store/modules/socket';
 const emit = defineEmits()
 const { proxy } = getCurrentInstance()

 const state = reactive({
  chatNum: 1390,
  onlineNum: computed(() => {
-    return proxy.$store.getters.onlineUserNum
+    return useSocketStore().onlineNum
  }),
  amount: 99998,
  order: 1999,
--- a/src/views/index_v1.vue
+++ b/src/views/index_v1.vue
@ -130,6 +130,9 @@ import WordCloudChat from './dashboard/WordCloud.vue'

 import dayjs from 'dayjs'

+import useUserStore from '@/store/modules/user'
+import useSocketStore from '@/store/modules/socket'
+
 const data = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
@ -200,13 +203,13 @@ const data = {
 }
 const { proxy } = getCurrentInstance()
 const userInfo = computed(() => {
-  return proxy.$store.getters.userinfo
+  return useUserStore().userInfo
 })
 const currentTime = computed(() => {
  return proxy.parseTime(new Date())
 })
 const onlineUsers = computed(() => {
-  return proxy.$store.getters.onlineUsers
+  return useSocketStore().onlineUsers
 })

 let lineChartData = reactive([])
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -69,8 +69,9 @@ import { encrypt, decrypt } from '@/utils/jsencrypt'
 import defaultSettings from '@/settings'
 import starBackground from '@/views/components/starBackground.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
+import useUserStore from '@/store/modules/user'

-const store = useStore()
+const userStore = useUserStore()
 const router = useRouter()
 const { proxy } = getCurrentInstance()

@ -118,8 +119,8 @@ function handleLogin() {
        Cookies.remove('rememberMe')
      }
      // 调用action的登录方法
-      store
-        .dispatch('Login', loginForm.value)
+      userStore
+        .login(loginForm.value)
        .then(() => {
          proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
          router.push({ path: redirect.value || '/' })
--- a/src/views/system/user/profile/operLog.vue
+++ b/src/views/system/user/profile/operLog.vue
@ -1,50 +1,55 @@
 <template>
-	<div class="app-container">
-		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
-			<el-form-item>
-				<el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="YYYY-MM-DD" type="daterange"
-					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
-				</el-date-picker>
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-				<el-button icon="refresh" @click="resetQuery">重置</el-button>
-			</el-form-item>
-		</el-form>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+      <el-form-item>
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+        <el-button icon="refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>

-		<el-table v-loading="loading" :data="list">
-			<!-- <el-table-column label="编号" align="center" prop="operId" width="60px" :show-overflow-tooltip="true" /> -->
-			<el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
-			<el-table-column prop="businessType" label="业务类型" align="center">
-				<template #default="scope">
-					<dict-tag :options="businessTypeOptions" :value="scope.row.businessType" />
-				</template>
-			</el-table-column>
-			<el-table-column label="请求方式" align="center" prop="requestMethod" />
-			<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
-			<el-table-column label="操作状态" align="center" prop="status">
-				<template #default="{ row }">
-					<dict-tag :options="statusOptions" :value="row.status"></dict-tag>
-				</template>
-			</el-table-column>
+    <el-table v-loading="loading" :data="list">
+      <!-- <el-table-column label="编号" align="center" prop="operId" width="60px" :show-overflow-tooltip="true" /> -->
+      <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
+      <el-table-column prop="businessType" label="业务类型" align="center">
+        <template #default="scope">
+          <dict-tag :options="businessTypeOptions" :value="scope.row.businessType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="请求方式" align="center" prop="requestMethod" />
+      <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="操作状态" align="center" prop="status">
+        <template #default="{ row }">
+          <dict-tag :options="statusOptions" :value="row.status"></dict-tag>
+        </template>
+      </el-table-column>

-			<el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true" />
-			<el-table-column label="操作日期" align="center" prop="operTime" width="180">
-				<template #default="scope">
-					<span>{{ scope.row.operTime }}</span>
-				</template>
-			</el-table-column>
-		</el-table>
+      <el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true" />
+      <el-table-column label="操作日期" align="center" prop="operTime" width="180">
+        <template #default="scope">
+          <span>{{ scope.row.operTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>

-		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-			v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-	</div>
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+  </div>
 </template>

 <script setup name="operlog">
 import { list as queryLog } from '@/api/monitor/operlog'
-
+import useUserStore from '@/store/modules/user'
 // 遮罩层
 const loading = ref(true)
 // 总条数
@ -60,53 +65,50 @@ const dateRange = ref([])

 // 查询参数
 const queryParams = reactive({
-	pageNum: 1,
-	pageSize: 10,
-	title: undefined,
-	operName: undefined,
-	businessType: undefined,
-	status: undefined,
+  pageNum: 1,
+  pageSize: 10,
+  title: undefined,
+  operName: undefined,
+  businessType: undefined,
+  status: undefined,
 })

 const { proxy } = getCurrentInstance()
 var dictParams = [
-	{ dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
-	{ dictType: 'sys_common_status', columnName: 'statusOptions' },
+  { dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
+  { dictType: 'sys_common_status', columnName: 'statusOptions' },
 ]
 proxy.getDicts(dictParams).then((response) => {
-	response.data.forEach((element) => {
-		proxy[element.columnName] = element.list
-	})
+  response.data.forEach((element) => {
+    proxy[element.columnName] = element.list
+  })
 })

 /** 查询登录日志 */
 function getList() {
-	loading.value = true
-	queryParams.operName = proxy.$store.getters.userinfo.userName
-	queryLog(proxy.addDateRange(queryParams, dateRange.value)).then(
-		(response) => {
-			loading.value = false
-			if (response.code == 200) {
-				list.value = response.data.result
-				total.value = response.data.totalNum
-			} else {
-				total.value = 0
-				list.value = []
-			}
-		}
-	)
+  loading.value = true
+  queryParams.operName = useUserStore().userInfo.userName
+  queryLog(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
+    loading.value = false
+    if (response.code == 200) {
+      list.value = response.data.result
+      total.value = response.data.totalNum
+    } else {
+      total.value = 0
+      list.value = []
+    }
+  })
 }
 /** 重置按钮操作 */
 function resetQuery() {
-	dateRange.value = []
-	proxy.resetForm('queryForm')
-	handleQuery()
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
 }
 /** 搜索按钮操作 */
 function handleQuery() {
-	queryParams.pageNum = 1
-	getList()
+  queryParams.pageNum = 1
+  getList()
 }
 getList()
 </script>
-
--- a/src/views/system/user/profile/userAvatar.vue
+++ b/src/views/system/user/profile/userAvatar.vue
@ -57,6 +57,7 @@
 import 'vue-cropper/dist/index.css'
 import { VueCropper } from 'vue-cropper'
 import { uploadAvatar } from '@/api/system/user'
+import useUserStore from '@/store/modules/user'

 export default {
  components: {
@ -69,7 +70,7 @@ export default {
    },
  },
  setup() {
-    const store = useStore()
+    const useStore = useUserStore()
    const { proxy } = getCurrentInstance()

    const open = ref(false)
@ -78,7 +79,7 @@ export default {
    const fileName = ref('')
    //图片裁剪数据
    const options = reactive({
-      img: store.getters.avatar, // 裁剪图片的地址
+      img: useStore.avatar, // 裁剪图片的地址
      autoCrop: true, // 是否默认生成截图框
      autoCropWidth: 200, // 默认生成截图框宽度
      autoCropHeight: 200, // 默认生成截图框高度
@ -126,12 +127,12 @@ export default {
    function uploadImg() {
      proxy.$refs.cropper.getCropBlob((data) => {
        let formData = new FormData()
-				var fileOfBlob = new File([data], fileName.value);
+        var fileOfBlob = new File([data], fileName.value)
        formData.append('picture', fileOfBlob)
        uploadAvatar(formData).then((response) => {
          open.value = false
          options.img = response.data.imgUrl
-          store.commit('SET_AVATAR', options.img)
+          useStore.avatar = options.img
          proxy.$modal.msgSuccess('修改成功')
          visible.value = false
        })
@ -143,7 +144,7 @@ export default {
    }
    /** 关闭窗口 */
    function closeDialog() {
-      options.img = store.getters.avatar
+      options.img = useStore.avatar
      options.visible = false
    }

--- a/vite/plugins/auto-import.js
+++ b/vite/plugins/auto-import.js
@ -5,9 +5,7 @@ export default function createAutoImport() {
    imports: [
      'vue',
      'vue-router',
-      {
-        'vuex': ['useStore']
-      }
+      'pinia'
    ],
    dts: "src/auto-import.d.ts" // 生成 `auto-import.d.ts` 全局声明
  })