放弃vuex改用pinia (#872)

Co-authored-by: bypanghu <bypanghu@163.com>

web/src/view/example/breakpoint/breakpoint.vue

@@ -30,14 +30,13 @@
 
 <script setup>
 import SparkMD5 from 'spark-md5'
-import axios from 'axios'
 import {
   findFile,
   breakpointContinueFinish,
   removeChunk,
   breakpointContinue
 } from '@/api/breakpoint'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 
 const file = ref(null)
@@ -101,7 +100,7 @@ const choseFile = async(e) => {
         })
       } else {
         waitUpLoad.value = [] // 秒传则没有需要上传的切片
-        ElMessage.success("文件已秒传")
+        ElMessage.success('文件已秒传')
       }
       waitNum.value = waitUpLoad.value.length // 记录长度用于百分比展示
       console.log(waitNum.value)
@@ -141,7 +140,7 @@ const sliceFile = () => {
         })
 }
 
-watch(waitNum,()=>{percentage.value = Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100)})
+watch(waitNum, () => { percentage.value = Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100) })
 
 const upLoadFileSlice = async(item) => {
   // 切片上传
@@ -164,7 +163,7 @@ const upLoadFileSlice = async(item) => {
         fileMd5: fileMd5.value,
         filePath: res.data.filePath,
       }
-      ElMessage.success("上传成功")
+      ElMessage.success('上传成功')
       await removeChunk(params)
     }
   }

web/src/view/example/excel/excel.vue

@@ -6,7 +6,7 @@
         <el-upload
           class="excel-btn"
           :action="`${path}/excel/importExcel`"
-          :headers="{'x-token':token}"
+          :headers="{'x-token':userStore.token}"
           :on-success="loadExcel"
           :show-file-list="false"
         >
@@ -40,10 +40,10 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
+import { useUserStore } from '@/pinia/modules/user'
 import { exportExcel, loadExcelData, downloadTemplate } from '@/api/excel'
 import { getMenuList } from '@/api/menu'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 const path = ref(import.meta.env.VITE_BASE_API)
 
 const page = ref(1)
@@ -63,8 +63,7 @@ const getTableData = async(f = () => {}) => {
 }
 getTableData(getMenuList)
 
-const store = useStore()
-const token = computed(() => store.getters['user/token'])
+const userStore = useUserStore()
 
 const handleExcelExport = (fileName) => {
   if (!fileName || typeof fileName !== 'string') {

web/src/view/example/index.vue

@@ -2,7 +2,7 @@
   <div>
     <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive :include="$store.getters['router/keepAliveRouters']">
+        <keep-alive :include="useRouterStore.keepAliveRouters">
           <component :is="Component" />
         </keep-alive>
       </transition>
@@ -15,3 +15,6 @@ export default {
   name: 'Example'
 }
 </script>
+<script setup>
+import { useRouterStore } from '@/pinia/modules/router'
+</script>

web/src/view/example/upload/upload.vue

@@ -5,7 +5,7 @@
         <el-upload
           :action="`${path}/fileUploadAndDownload/upload`"
           :before-upload="checkFile"
-          :headers="{ 'x-token': token }"
+          :headers="{ 'x-token': userStore.token }"
           :on-error="uploadError"
           :on-success="uploadSuccess"
           :show-file-list="false"
@@ -67,20 +67,18 @@
 </template>
 
 <script setup>
-import { useStore } from 'vuex'
 import { getFileList, deleteFile } from '@/api/fileUploadAndDownload'
 import { downloadImage } from '@/utils/downloadImg'
+import { useUserStore } from '@/pinia/modules/user'
 import CustomPic from '@/components/customPic/index.vue'
 import UploadImage from '@/components/upload/image.vue'
 import { formatDate } from '@/utils/format'
 
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-const store = useStore()
-
 const path = ref(import.meta.env.VITE_BASE_API)
-const token = computed(() => store.getters['user/token'])
+const userStore = useUserStore()
 
 const imageUrl = ref('')
 

web/src/view/layout/aside/asideComponent/asyncSubmenu.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import { defineProps } from 'vue'
 export default {
   name: 'AsyncSubmenu',
 }

web/src/view/layout/aside/asideComponent/index.vue

@@ -15,7 +15,7 @@ export default {
 <script setup>
 import MenuItem from './menuItem.vue'
 import AsyncSubmenu from './asyncSubmenu.vue'
-import { computed, defineProps } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
   routerInfo: {
     type: Object,

web/src/view/layout/aside/asideComponent/menuItem.vue

@@ -16,7 +16,6 @@ export default {
 </script>
 
 <script setup>
-import { defineProps } from 'vue'
 defineProps({
   routerInfo: {
     default: function() {

web/src/view/layout/aside/historyComponent/history.vue

@@ -19,13 +19,13 @@
         <template #label>
           <span
             :style="{
-              color: activeValue === name(item) ? activeColor : '#333',
+              color: activeValue === name(item) ? userStore.activeColor : '#333',
             }"
           ><i
              class="dot"
              :style="{
                backgroundColor:
-                 activeValue === name(item) ? activeColor : '#ddd',
+                 activeValue === name(item) ? userStore.activeColor : '#ddd',
              }"
            />
             {{ item.meta.title }}</span>
@@ -54,12 +54,11 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
 import { emitter } from '@/utils/bus.js'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '@/pinia/modules/user'
 
-const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -71,8 +70,7 @@ const historys = ref([])
 const activeValue = ref('')
 const contextMenuVisible = ref(false)
 
-const userInfo = computed(() => store.getters['user/userInfo'])
-const activeColor = computed(() => store.getters['user/activeColor'])
+const userStore = useUserStore()
 
 const name = (item) => {
   return (
@@ -85,7 +83,7 @@ const top = ref(0)
 const isCollapse = ref(false)
 const isMobile = ref(false)
 const rightActive = ref('')
-const defaultRouter = computed(() => userInfo.value.authority.defaultRouter)
+const defaultRouter = computed(() => userStore.userInfo.authority.defaultRouter)
 const openContextMenu = (e) => {
   if (
     historys.value.length === 1 &&

web/src/view/layout/aside/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ background: sideMode }">
+  <div :style="{ background: userStore.sideMode }">
     <el-scrollbar style="height: calc(100vh - 60px)">
       <transition
         :duration="{ enter: 800, leave: 100 }"
@@ -10,14 +10,14 @@
           :collapse="isCollapse"
           :collapse-transition="false"
           :default-active="active"
-          :background-color="sideMode"
-          :active-text-color="activeColor"
-          :text-color="baseColor"
+          :background-color="userStore.sideMode"
+          :active-text-color="userStore.activeColor"
+          :text-color="userStore.baseColor"
           class="el-menu-vertical"
           unique-opened
           @select="selectMenuItem"
         >
-          <template v-for="item in asyncRouters[0].children">
+          <template v-for="item in routerStore.asyncRouters[0].children">
             <aside-component
               v-if="!item.hidden"
               :key="item.name"
@@ -37,20 +37,18 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent/index.vue'
 import { emitter } from '@/utils/bus.js'
-import { ref, computed, watch, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '@/pinia/modules/user'
+import { useRouterStore } from '@/pinia/modules/router'
 
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
 
-const asyncRouters = computed(() => store.getters['router/asyncRouters'])
-const baseColor = computed(() => store.getters['user/baseColor'])
-const activeColor = computed(() => store.getters['user/activeColor'])
-const sideMode = computed(() => store.getters['user/sideMode'])
+const userStore = useUserStore()
+const routerStore = useRouterStore()
 
 const active = ref('')
 watch(route, () => {

web/src/view/layout/index.vue

@@ -44,7 +44,7 @@
                           <div class="dp-flex justify-content-center align-items height-full width-full">
                             <span class="header-avatar" style="cursor: pointer">
                               <CustomPic />
-                              <span style="margin-left: 5px">{{ userInfo.nickName }}</span>
+                              <span style="margin-left: 5px">{{ userStore.userInfo.nickName }}</span>
                               <el-icon>
                                 <arrow-down />
                               </el-icon>
@@ -54,18 +54,18 @@
                             <el-dropdown-menu class="dropdown-group">
                               <el-dropdown-item>
                                 <span style="font-weight: 600;">
-                                  当前角色：{{ userInfo.authority.authorityName }}
+                                  当前角色：{{ userStore.userInfo.authority.authorityName }}
                                 </span>
                               </el-dropdown-item>
-                              <template v-if="userInfo.authorities">
-                                <el-dropdown-item v-for="item in userInfo.authorities.filter(i=>i.authorityId!==userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
+                              <template v-if="userStore.userInfo.authorities">
+                                <el-dropdown-item v-for="item in userStore.userInfo.authorities.filter(i=>i.authorityId!==userStore.userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
                                   <span>
                                     切换为：{{ item.authorityName }}
                                   </span>
                                 </el-dropdown-item>
                               </template>
                               <el-dropdown-item icon="avatar" @click="toPerson">个人信息</el-dropdown-item>
-                              <el-dropdown-item icon="reading-lamp" @click="LoginOut">登 出</el-dropdown-item>
+                              <el-dropdown-item icon="reading-lamp" @click="userStore.LoginOut">登 出</el-dropdown-item>
                             </el-dropdown-menu>
                           </template>
                         </el-dropdown>
@@ -83,7 +83,7 @@
         </transition>
         <router-view v-if="reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
           <transition mode="out-in" name="el-fade-in-linear">
-            <keep-alive :include="$store.getters['router/keepAliveRouters']">
+            <keep-alive :include="useRouterStore.keepAliveRouters">
               <component :is="Component" />
             </keep-alive>
           </transition>
@@ -109,13 +109,13 @@ import Search from '@/view/layout/search/search.vue'
 import BottomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
 import CustomPic from '@/components/customPic/index.vue'
 import Setting from './setting/index.vue'
-import { useStore } from 'vuex'
 import { setUserAuthority } from '@/api/user'
 import { emitter } from '@/utils/bus.js'
 import { computed, ref, onMounted, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/pinia/modules/user'
+import { useRouterStore } from '@/pinia/modules/router'
 
-const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
@@ -163,35 +163,30 @@ onMounted(() => {
   }
 })
 
-const userInfo = computed(() => store.getters['user/userInfo'])
-const sideMode = computed(() => store.getters['user/sideMode'])
-const baseColor = computed(() => store.getters['user/baseColor'])
+const userStore = useUserStore()
+
 const textColor = computed(() => {
-  if (sideMode === 'dark') {
+  if (userStore.sideMode === 'dark') {
     return '#fff'
-  } else if (sideMode === 'light') {
+  } else if (userStore.sideMode === 'light') {
     return '#191a23'
   } else {
-    return baseColor.value
+    return userStore.baseColor
   }
 })
 
 const backgroundColor = computed(() => {
-  if (sideMode === 'dark') {
+  if (userStore.sideMode === 'dark') {
     return '#191a23'
-  } else if (sideMode === 'light') {
+  } else if (userStore.sideMode === 'light') {
     return '#fff'
   } else {
-    return sideMode.value
+    return userStore.sideMode
   }
 })
 
 const matched = computed(() => route.matched)
 
-const LoginOut = () => {
-  store.dispatch('user/LoginOut')
-}
-
 const changeUserAuth = async(id) => {
   const res = await setUserAuthority({
     authorityId: id

web/src/view/layout/screenfull/index.vue

@@ -70,7 +70,7 @@ export default {
 
 <script setup>
 import screenfull from 'screenfull' // 引入screenfull
-import { defineProps, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 defineProps({
   width: {
     type: Number,

web/src/view/layout/search/search.vue

@@ -11,7 +11,7 @@
           @change="changeRouter"
         >
           <el-option
-            v-for="item in routerList"
+            v-for="item in routerStore.routerList"
             :key="item.value"
             :label="item.label"
             :value="item.value"
@@ -58,15 +58,14 @@ export default {
 
 <script setup>
 import Screenfull from '@/view/layout/screenfull/index.vue'
-import { useStore } from 'vuex'
 import { emitter } from '@/utils/bus.js'
-import { ref, computed, nextTick } from 'vue'
+import { ref, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
+import { useRouterStore } from '@/pinia/modules/router'
 
-const store = useStore()
 const router = useRouter()
 
-const routerList = computed(() => store.getters['router/routerList'])
+const routerStore = useRouterStore()
 
 const value = ref('')
 const changeRouter = () => {

web/src/view/layout/setting/index.vue

@@ -13,7 +13,7 @@
             <div class="theme-box">
               <div class="item" @click="changeMode('light')">
                 <div class="item-top">
-                  <el-icon v-if="mode === 'light'" class="check">
+                  <el-icon v-if="userStore.mode === 'light'" class="check">
                     <check />
                   </el-icon>
                   <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
@@ -24,7 +24,7 @@
               </div>
               <div class="item" @click="changeMode('dark')">
                 <div class="item-top">
-                  <el-icon v-if="mode === 'dark'" class="check">
+                  <el-icon v-if="userStore.mode === 'dark'" class="check">
                     <check />
                   </el-icon>
                   <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
@@ -49,12 +49,12 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
-import { computed, ref } from 'vue'
-const store = useStore()
+import { ref } from 'vue'
+import { useUserStore } from '@/pinia/modules/user'
 const drawer = ref(false)
 const direction = ref('rtl')
-const mode = computed(() => store.getters['user/mode'])
+
+const userStore = useUserStore()
 
 const handleClose = () => {
   drawer.value = false
@@ -64,10 +64,10 @@ const showSettingDrawer = () => {
 }
 const changeMode = (e) => {
   if (e === null) {
-    store.dispatch('user/changeSideMode', 'dark')
+    userStore.changeSideMode('dark')
     return
   }
-  store.dispatch('user/changeSideMode', e)
+  userStore.changeSideMode(e)
 }
 
 </script>

web/src/view/login/index.vue

@@ -111,16 +111,14 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
 import { captcha } from '@/api/user'
 import { checkDB } from '@/api/initdb'
 import bootomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
 import { reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
+import { useUserStore } from '@/pinia/modules/user'
 const router = useRouter()
-const store = useStore()
-
 // 验证函数
 const checkUsername = (rule, value, callback) => {
   if (value.length < 5) {
@@ -173,8 +171,10 @@ const rules = reactive({
     },
   ],
 })
+
+const userStore = useUserStore()
 const login = async() => {
-  return await store.dispatch('user/LoginIn', loginFormData)
+  return await userStore.LoginIn(loginFormData)
 }
 const submitForm = () => {
   loginForm.value.validate(async(v) => {
@@ -200,7 +200,7 @@ const checkInit = async() => {
   const res = await checkDB()
   if (res.code === 0) {
     if (res.data?.needInit) {
-      store.commit('user/NeedInit')
+      userStore.NeedInit()
       router.push({ name: 'Init' })
     } else {
       ElMessage({

web/src/view/person/person.vue

@@ -8,10 +8,10 @@
               class="user-headpic-update"
               :style="{
                 'background-image': `url(${
-                  userInfo.headerImg &&
-                  userInfo.headerImg.slice(0, 4) !== 'http'
-                    ? path + userInfo.headerImg
-                    : userInfo.headerImg
+                  userStore.userInfo.headerImg &&
+                  userStore.userInfo.headerImg.slice(0, 4) !== 'http'
+                    ? path + userStore.userInfo.headerImg
+                    : userStore.userInfo.headerImg
                 })`,
                 'background-repeat': 'no-repeat',
                 'background-size': 'cover',
@@ -25,7 +25,7 @@
             </div>
             <div class="user-personality">
               <p v-if="!editFlag" class="nickName">
-                {{ userInfo.nickName }}
+                {{ userStore.userInfo.nickName }}
                 <el-icon class="pointer" color="#66b1ff" @click="openEidt">
                   <edit />
                 </el-icon>
@@ -47,7 +47,7 @@
                   <el-icon>
                     <user />
                   </el-icon>
-                  {{ userInfo.nickName }}
+                  {{ userStore.userInfo.nickName }}
                 </li>
                 <el-tooltip
                   class="item"
@@ -179,11 +179,9 @@ export default {
 <script setup>
 import ChooseImg from '@/components/chooseImg/index.vue'
 import { setUserInfo, changePassword } from '@/api/user.js'
-import { useStore } from 'vuex'
-import { computed, reactive, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-
-const store = useStore()
+import { useUserStore } from '@/pinia/modules/user'
 
 const path = ref(import.meta.env.VITE_BASE_API)
 const activeName = ref('second')
@@ -212,7 +210,7 @@ const rules = reactive({
   ],
 })
 
-const userInfo = computed(() => store.getters['user/userInfo'])
+const userStore = useUserStore()
 const modifyPwdForm = ref(null)
 const showPassword = ref(false)
 const pwdModify = ref({})
@@ -222,7 +220,7 @@ const savePassword = async() => {
   modifyPwdForm.value.validate((valid) => {
     if (valid) {
       changePassword({
-        username: userInfo.value.userName,
+        username: userStore.userInfo.userName,
         password: pwdModify.value.password,
         newPassword: pwdModify.value.newPassword,
       }).then((res) => {
@@ -252,10 +250,10 @@ const openChooseImg = () => {
 }
 
 const ResetUserInfo = (data) => {
-  store.commit('user/ResetUserInfo', data)
+  userStore.ResetUserInfo(data)
 }
 const enterImg = async(url) => {
-  const res = await setUserInfo({ headerImg: url, ID: userInfo.value.ID })
+  const res = await setUserInfo({ headerImg: url, ID: userStore.userInfo.ID })
   if (res.code === 0) {
     ResetUserInfo({ headerImg: url })
     ElMessage({
@@ -266,7 +264,7 @@ const enterImg = async(url) => {
 }
 
 const openEidt = () => {
-  nickName.value = userInfo.value.nickName
+  nickName.value = userStore.userInfo.nickName
   editFlag.value = true
 }
 
@@ -278,7 +276,7 @@ const closeEdit = () => {
 const enterEdit = async() => {
   const res = await setUserInfo({
     nickName: nickName.value,
-    ID: userInfo.value.ID,
+    ID: userStore.userInfo.ID,
   })
   if (res.code === 0) {
     ResetUserInfo({ nickName: nickName.value })

web/src/view/routerHolder.vue

@@ -3,7 +3,7 @@
   <div>
     <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive :include="$store.getters['router/keepAliveRouters']">
+        <keep-alive :include="useRouterStore.keepAliveRouters">
           <component :is="Component" />
         </keep-alive>
       </transition>
@@ -16,3 +16,7 @@ export default {
   name: 'RouterHolder'
 }
 </script>
+
+<script setup>
+import { useRouterStore } from '@/pinia/modules/router'
+</script>

web/src/view/superAdmin/authority/components/apis.vue

@@ -25,7 +25,7 @@ export default {
 <script setup>
 import { getAllApis } from '@/api/api'
 import { UpdateCasbin, getPolicyPathByAuthorityId } from '@/api/casbin'
-import { defineProps, ref, defineExpose } from 'vue'
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 const props = defineProps({
   row: {

web/src/view/superAdmin/authority/components/datas.vue

@@ -22,7 +22,7 @@ export default {
 <script setup>
 import { setDataAuthority } from '@/api/authority'
 import warningBar from '@/components/warningBar/warningBar.vue'
-import { defineProps, ref, defineEmits, defineExpose } from 'vue'
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 const props = defineProps({
   row: {

web/src/view/superAdmin/authority/components/menus.vue

@@ -39,7 +39,7 @@ import { getBaseMenuTree, getMenuAuthority, addMenuAuthority } from '@/api/menu'
 import {
   updateAuthority
 } from '@/api/authority'
-import { defineProps, defineEmits, ref, defineExpose } from 'vue'
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 const props = defineProps({
   row: {

web/src/view/superAdmin/index.vue

@@ -2,7 +2,7 @@
   <div>
     <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive :include="$store.getters['router/keepAliveRouters']">
+        <keep-alive :include="useRouterStore.keepAliveRouters">
           <component :is="Component" />
         </keep-alive>
       </transition>
@@ -15,3 +15,6 @@ export default {
   name: 'SuperAdmin'
 }
 </script>
+<script setup>
+import { useRouterStore } from '@/pinia/modules/router'
+</script>

web/src/view/superAdmin/menu/icon.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref, reactive } from 'vue'
+import { ref, reactive } from 'vue'
 const props = defineProps({
   meta: {
     default: function() {
@@ -1153,6 +1153,7 @@ const options = reactive([
 ])
 
 const metaData = ref(props.meta)
+metaData.value.icon = options[0].label
 </script>
 
 <script>

web/src/view/systemTools/autoCode/component/fieldDialog.vue

@@ -83,7 +83,7 @@
 import { toLowerCase, toSQLLine } from '@/utils/stringFun'
 import { getSysDictionaryList } from '@/api/sysDictionary'
 import warningBar from '@/components/warningBar/warningBar.vue'
-import { ref, defineProps, defineExpose } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps({
   dialogMiddle: {

web/src/view/systemTools/autoCode/component/previewCodeDialg.vue

@@ -13,7 +13,7 @@ import marked from 'marked'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atelier-plateau-light.css'
 import { ElMessage } from 'element-plus'
-import { defineProps, defineExpose, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const props = defineProps({
   previewCode: {

web/src/view/systemTools/index.vue

@@ -2,7 +2,7 @@
   <div>
     <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive :include="$store.getters['router/keepAliveRouters']">
+        <keep-alive :include="useRouterStore.keepAliveRouters">
           <component :is="Component" />
         </keep-alive>
       </transition>
@@ -15,3 +15,6 @@ export default {
   name: 'System'
 }
 </script>
+<script setup>
+import { useRouterStore } from '@/pinia/modules/router'
+</script>