feature:全局优化增加pinia并且数据持久化

src/App.vue

@@ -6,13 +6,13 @@
 
 <script lang="ts" setup>
   import {computed} from "vue";
-  import {useStore} from "vuex";
+  import {useSettingStore} from "@/store/modules/setting"
   // 配置element中文
   import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
-  const store = useStore()
+  const SettingStore = useSettingStore()
   // 配置全局组件大小
-  const globalComSize = computed(():string=>store.state.setting.themeConfig.globalComSize)
+  const globalComSize = computed(():string=>SettingStore.themeConfig.globalComSize)
 </script>
 
 <style lang="scss">

src/components/Charts/LineMarker.vue

@@ -5,9 +5,6 @@
   import * as echarts from 'echarts'
   import { computed, nextTick, onMounted, ref, watch } from 'vue'
   import { EChartsType } from 'echarts/core'
-  import { useStore } from 'vuex'
-  // 在setup中获取store
-  const store = useStore()
   let props = defineProps({
     className: {
       type: String,

src/components/u-headerSearch/index.vue

@@ -26,22 +26,19 @@
 
 <script lang="ts" setup>
 import {computed, onMounted, ref, watch} from 'vue'
-import {useStore} from "vuex";
 import path from 'path-browserify'
 import Fuse from 'fuse.js'
 import { useVueFuse } from 'vue-fuse'
 import {useRouter} from "vue-router";
 const router = useRouter()
-// 在setup中获取store
-const store = useStore()
 const isShowSearch = ref(false);
 const options = ref([]);
 const searchPool = ref([]);
 const search = ref('');
 const fuse = ref(null);
-
-
-const routes = computed(() => store.state.permission.routes)
+import {usePermissionStore} from "@/store/modules/permission"
+const PermissionStore = usePermissionStore()
+const routes = computed(() => PermissionStore.routes)
 
 const handleSearch = () => {
   isShowSearch.value = true
@@ -116,10 +113,8 @@ onMounted(()=>{
 })
 
 const querySearch=(query)=> {
-  console.log('====query=====',query,fuse.value)
   if (query !== '') {
     options.value = fuse.value.search(query)
-    console.log('=====ddddddddddd=====',options.value )
   } else {
     options.value = []
   }

src/components/u-theme/components/switchDark.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts" name="switchDark">
   import {computed, ref} from "vue";
-  import {useSettingStore} from "@/storeNew/modules/setting"
+  import {useSettingStore} from "@/store/modules/setting"
   import {toggleDark} from '../../../hooks/dark'
   const SettingStore = useSettingStore()
   // 横向

src/components/u-theme/index.vue

@@ -49,13 +49,11 @@
 <script lang="ts" setup>
   import {computed, ref} from 'vue'
   import SwitchDark from './components/switchDark.vue'
-  import { useStore } from 'vuex'
   import {ElMessage} from "element-plus";
   import {PRIMARY_COLOR} from "@/config/index";
-  import {useSettingStore} from "@/storeNew/modules/setting"
+  import {useSettingStore} from "@/store/modules/setting"
   import {getDarkColor,getLightColor} from '@/utils/index'
   const SettingStore = useSettingStore()
-  const store = useStore()
   const layout = ref(SettingStore.themeConfig.mode)
   const showTag = ref(SettingStore.themeConfig.showTag)
   const showLogo = ref(SettingStore.themeConfig.showLogo)

src/layout/Header/components/Setting.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {useSettingStore} from "@/storeNew/modules/setting"
+  import {useSettingStore} from "@/store/modules/setting"
   const SettingStore = useSettingStore()
   const changeSwitch = (key,val) => {
     SettingStore.setThemeConfig({key, val})

src/layout/Header/components/globalComSize.vue

@@ -13,10 +13,10 @@
 
 <script setup lang="ts">
 import { reactive, computed } from "vue";
-import {useStore} from "vuex";
-const store = useStore()
+import {useSettingStore} from "@/store/modules/setting"
+const SettingStore = useSettingStore()
 
-const globalComSize = computed(():string=>store.state.setting.themeConfig.globalComSize)
+const globalComSize = computed(():string=>SettingStore.themeConfig.globalComSize)
 
 const assemblySizeListCh = reactive<{ [key: string]: any }>({
   default: "默认",
@@ -26,11 +26,9 @@ const assemblySizeListCh = reactive<{ [key: string]: any }>({
 
 const assemblySizeList = reactive<string[]>(["default", "large", "small"]);
 
-
 const setAssemblySize = (item: string) => {
   if (globalComSize.value === item) return;
-  store.dispatch('setting/setThemeConfig', {key:'globalComSize', val:item})
-
+  SettingStore.setThemeConfig({key:'globalComSize', val:item})
 };
 </script>
 

src/layout/Header/index.vue

@@ -65,12 +65,10 @@
   import { computed, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { ElMessageBox, ElMessage } from 'element-plus'
-  import {useSettingStore} from "@/storeNew/modules/setting"
-  import {useUserStore} from "@/storeNew/modules/user"
-  import {usePermissionStore} from "@/storeNew/modules/permission"
-  import { useStore } from 'vuex'
+  import {useSettingStore} from "@/store/modules/setting"
+  import {useUserStore} from "@/store/modules/user"
+  import {usePermissionStore} from "@/store/modules/permission"
 
-  const store = useStore()
   const person = ref()
   const router = useRouter()
   const SettingStore = useSettingStore()

src/layout/Main/index.vue

@@ -14,17 +14,17 @@
 
 <script lang="ts" setup>
   import UTheme from '@/components/u-theme/index.vue'
-  import { useStore } from 'vuex'
+
   import { computed, ref } from 'vue'
-  const store = useStore()
+  import {useSettingStore} from "@/store/modules/setting"
+  import {useTagsViewStore} from "@/store/modules/tagsView"
+  const SettingStore = useSettingStore()
+  const TagsViewStore = useTagsViewStore()
 
-  const cachedViews = computed(() => {
-    return store.state.tagsView.cachedViews
-  })
+  const cachedViews = computed(() =>TagsViewStore.cachedViews)
+
+  const isReload = computed(() => SettingStore.isReload)
 
-  const isReload = computed(() => {
-    return store.state.app.isReload
-  })
 </script>
 
 <style lang="scss" scoped>

src/layout/Sidebar/components/Menu.vue

@@ -21,8 +21,8 @@
 <script lang="ts" setup>
   import SubItem from './SubItem.vue'
   import { useRoute } from 'vue-router'
-  import {usePermissionStore} from "@/storeNew/modules/permission"
-  import {useSettingStore} from "@/storeNew/modules/setting"
+  import {usePermissionStore} from "@/store/modules/permission"
+  import {useSettingStore} from "@/store/modules/setting"
   import { ref, computed } from 'vue'
 
   // 在setup中获取store
@@ -33,6 +33,8 @@
   // 获取路由
   const permission_routes = computed(() => PermissionStore.permission_routes)
 
+
+
   const activeMenu = computed(() => {
     const { meta, path } = route
     // if set path, the sidebar will highlight the path you set

src/layout/Sidebar/index.vue

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import UMenu from './components/Menu.vue'
 import logo from './components/Logo.vue'
-import {useSettingStore} from "@/storeNew/modules/setting"
+import {useSettingStore} from "@/store/modules/setting"
 import { ref, computed } from 'vue'
 
 const SettingStore = useSettingStore()

src/layout/TagsView/index.vue

@@ -42,25 +42,26 @@
 <script lang="ts" setup>
   import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
   import betterScroll from './betterScroll.vue'
-  import { useStore } from 'vuex'
   import { useRoute, useRouter } from 'vue-router'
 
+  import {useSettingStore} from "@/store/modules/setting"
+  import {useTagsViewStore} from "@/store/modules/tagsView"
+  import {usePermissionStore} from "@/store/modules/permission"
+
   import path from 'path-browserify'
-  const store = useStore()
   const route = useRoute()
   const router = useRouter()
+  const SettingStore = useSettingStore()
+  const TagsViewStore = useTagsViewStore()
+  const PermissionStore = usePermissionStore()
 
   const refresh = () => {
-    store.dispatch('app/setReload')
+    SettingStore.setReload()
   }
 
-  const routes = computed(() => {
-    return store.state.permission.routes
-  })
+  const routes = computed(() => PermissionStore.routes)
 
-  const visitedViews = computed(() => {
-    return store.state.tagsView.visitedViews
-  })
+  const visitedViews = computed(() => TagsViewStore.visitedViews)
 
   const bsScroll = ref<Expose.BetterScroll>()
   let obj = new WeakMap()
@@ -107,7 +108,7 @@
     let affixTag = (affixTags.value = filterAffixTags(routesNew))
     for (const tag of affixTag) {
       if (tag.name) {
-        store.dispatch('tagsView/addVisitedView', tag)
+        TagsViewStore.addVisitedView(tag)
       }
     }
   }
@@ -124,7 +125,7 @@
       return
     }
     if (name) {
-      store.dispatch('tagsView/addView', route)
+      TagsViewStore.addView(route)
     }
     return false
   }
@@ -146,7 +147,7 @@
     if (tags.value.get(view.path)) {
       tags.value.delete(view.path)
     }
-    let { visitedViews } = await store.dispatch('tagsView/delView', view)
+    let { visitedViews } = await TagsViewStore.delView(view)
     if (isActive(view)) {
       toLastView(visitedViews, view)
     }
@@ -169,7 +170,9 @@
 
   // 关闭所有 去首页
   const closeAllTab = ()=>{
-    store.dispatch('tagsView/delAllViews')
+    if(route.fullPath!=='/home'){
+      TagsViewStore.delAllViews()
+    }
     router.push('/')
   }
 
@@ -203,7 +206,7 @@
           // 移动
           handleScrollAction(tag, tags.value)
           if (fullPath !== route.fullPath) {
-            store.dispatch('tagsView/updateVisitedView', route)
+            TagsViewStore.updateVisitedView(route)
           }
           break
         }
@@ -235,7 +238,7 @@
         to.fullPath === '/home'
       ) {
         let whiteList = ['/error/404', '/error/401']
-        await store.dispatch('tagsView/removeView', whiteList)
+        await TagsViewStore.removeView(whiteList)
       }
       next()
     })

src/layout/hooks/useResizeHandler.ts

@@ -1,4 +1,4 @@
-import {useSettingStore} from "@/storeNew/modules/setting"
+import {useSettingStore} from "@/store/modules/setting"
 import {computed, onMounted, onUnmounted, watch} from "vue";
 import {useRoute} from "vue-router";
 

src/layout/index.vue

@@ -18,14 +18,13 @@
 
 <script lang="ts" setup>
   import { computed, defineComponent, ref } from 'vue'
-  import {useSettingStore} from "@/storeNew/modules/setting"
+  import {useSettingStore} from "@/store/modules/setting"
   import Sidebar from './Sidebar/index.vue'
   import UHeader from './Header/index.vue'
   import UMain from './Main/index.vue'
 
   import { useResizeHandler } from './hooks/useResizeHandler'
 
-    import { useStore } from 'vuex'
    const SettingStore = useSettingStore()
 
       // 是否折叠

src/main.ts

@@ -1,8 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
-import pinia from "./storeNew";
+import pinia from "./store";
 import 'default-passive-events'
 
 // 权限路由
@@ -37,7 +36,6 @@ Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
     }
 });
 app.use(pinia)
-app.use(store)
 app.use(router)
 
 app.use(ElementPlus).mount('#app')

src/permission.ts

@@ -1,8 +1,8 @@
 import router from './router/index'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import {useUserStore} from "@/storeNew/modules/user"
-import {usePermissionStore} from "@/storeNew/modules/permission"
+import {useUserStore} from "@/store/modules/user"
+import {usePermissionStore} from "@/store/modules/permission"
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 

src/store/getters.ts

@@ -1,8 +0,0 @@
-const getters = {
-  permission_routes: state => state.permission.routes,
-  isCollapse: state => state.app.isCollapse,
-  userInfo: state => state.user.userInfo,
-  roles: state => state.user.roles,
-
-}
-export default getters

src/store/index.ts

@@ -1,28 +0,0 @@
-import { createStore } from 'vuex'
-
-import permission from './modules/permission'
-import app from './modules/app'
-import user from './modules/user'
-import tagsView from './modules/tagsView'
-import setting from './modules/setting'
-
-import getters from './getters'
-
-export default createStore({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-  },
-  modules: {
-    permission,
-    app,
-    user,
-    tagsView,
-    setting
-  },
-  getters
-})

src/store/modules/app.ts

@@ -1,54 +0,0 @@
-import {Module} from "vuex";
-
-const state = {
-    isCollapse: true,
-    withoutAnimation:false,
-    device: 'desktop',
-    isReload:true,
-}
-
-const mutations = {
-    SET_COLLAPSE: (state, value) => {
-        state.isCollapse = value
-        state.withoutAnimation = false
-    },
-    // 获取设备
-    TOGGLE_DEVICE: (state, device) => {
-        state.device = device
-
-    },
-    // 点击遮罩层 关闭左边按钮
-    CLOSE_SIDEBAR:(state, withoutAnimation) => {
-        state.isCollapse = false
-        state.withoutAnimation = withoutAnimation
-    },
-
-    SET_RELOAD:(state) => {
-        state.isReload = false
-        setTimeout(()=>{
-            state.isReload = true
-        },50)
-    },
-
-}
-const actions = {
-    toggleDevice({ commit }, device) {
-        commit('TOGGLE_DEVICE', device)
-    },
-    closeSideBar({ commit }, { withoutAnimation }) {
-        commit('CLOSE_SIDEBAR', withoutAnimation)
-    },
-    setReload({commit}){
-        commit('SET_RELOAD')
-    }
-}
-
-
-const app:Module<any, any> = {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-}
-
-export default app

src/store/modules/permission.ts

@@ -1,85 +0,0 @@
-import {Module} from "vuex";
-
-import { asyncRoutes, constantRoutes } from '@/router/index'
-/**
- * 使用 meta.role 来确定当前用户是否具有权限
- * @param roles
- * @param route
- */
-function hasPermission(roles, route) {
-    if (route.meta && route.meta.roles) {
-        return roles.some(role => route.meta.roles.includes(role))
-    } else {
-        // return true
-        return false
-    }
-}
-
-/**
- * 通过递归过滤异步路由表
- * @param routes asyncRoutes
- * @param roles
- */
-export function filterAsyncRoutes(routes, roles) {
-    const res = []
-
-    routes.forEach(route => {
-        const tmp = { ...route }
-        if (hasPermission(roles, tmp)) {
-            if (tmp.children) {
-                tmp.children = filterAsyncRoutes(tmp.children, roles)
-            }
-            res.push(tmp)
-        }
-    })
-
-
-    return res
-}
-
-
-const state = {
-    routes: [],
-    addRoutes: []
-}
-
-const mutations = {
-    SET_ROUTES: (state, routes) => {
-        state.addRoutes = routes
-        state.routes = constantRoutes.concat(routes)
-        // state.routes = routes
-    },
-    CLEAR_ROUTERS:(state, routes) => {
-        state.addRoutes = []
-        state.routes = []
-    },
-}
-
-const actions = {
-    generateRoutes({ commit }, roles) {
-        return new Promise(resolve => {
-            // 在这判断是否有权限，哪些角色拥有哪些权限
-            let accessedRoutes
-            if (roles&&roles.length&&!roles.includes('admin')) {
-                accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-            } else {
-                accessedRoutes = asyncRoutes || []
-            }
-
-            commit('SET_ROUTES', accessedRoutes)
-            resolve(accessedRoutes)
-        })
-    },
-    clearRoutes({commit}){
-        commit('CLEAR_ROUTERS')
-    }
-}
-
-const permission:Module<any, any> = {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-}
-
-export default permission

src/store/modules/setting.ts

@@ -1,42 +0,0 @@
-import {Module} from "vuex";
-import {PRIMARY_COLOR} from "../../config";
-const state = {
-    themeConfig:{
-        showSetting:false,
-        // 菜单展示模式 默认 vertical   horizontal / vertical
-        mode: 'vertical',
-        // tagsView 是否展示 默认展示
-        showTag:true,
-        // 页脚
-        footer: true,
-        // 深色模式 切换暗黑模式
-        isDark: false,
-        // 显示侧边栏Logo
-        showLogo:true,
-        // 主题颜色
-        primary:PRIMARY_COLOR,
-        // element组件大小
-        globalComSize:'default'
-    },
-}
-
-const mutations = {
-    SET_THEME_CONFIG : (state, {key, val}) => {
-        state.themeConfig[key] = val
-    },
-}
-const actions = {
-    setThemeConfig({ commit }, data) {
-        commit('SET_THEME_CONFIG', data)
-    },
-}
-
-
-const setting:Module<any, any> = {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-}
-
-export default setting

src/store/modules/tagsView.ts

@@ -1,126 +0,0 @@
-import {Module} from "vuex";
-
-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'
-            })
-        )
-        if (view.meta.keepAlive) {
-
-            state.cachedViews.push(view.name)
-
-        }
-    },
-    REMOVE_VISITED_VIEW: (state, routes) => {
-        state.visitedViews = state.visitedViews.filter(item=>!routes.includes(item.path))
-    },
-    CLEAR_VISITED_VIEW:(state, view) => {
-        state.visitedViews = []
-        state.cachedViews = []
-    },
-    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) => {
-        state.visitedViews = state.visitedViews.filter(v=>{
-            return v.path !== view.path
-        })
-        state.cachedViews = state.cachedViews.filter(v=>{
-            return v.path !== view.path
-        })
-        // for (const [i, v] of state.visitedViews.entries()) {
-        //     if (v.path === view.path) {
-        //         state.visitedViews.splice(i, 1)
-        //         break
-        //     }
-        // }
-        // for (const i of state.cachedViews) {
-        //     if (i === view.name) {
-        //         const index = state.cachedViews.indexOf(i)
-        //         state.cachedViews.splice(index, 1)
-        //         break
-        //     }
-        // }
-
-    },
-    DEL_CACHED_VIEW: (state, view) => {
-        const index = state.cachedViews.indexOf(view.name)
-        index > -1 && state.cachedViews.splice(index, 1)
-    },
-
-    DEL_ALL_VIEWS: (state) => {
-        state.visitedViews = []
-        state.cachedViews = []
-    }
-
-}
-
-const actions = {
-    addView({ dispatch }, view) {
-        dispatch('addVisitedView', view)
-        // dispatch('addCachedView', view)
-    },
-    removeView({ commit }, views){
-        return new Promise((resolve, reject) => {
-            commit('REMOVE_VISITED_VIEW', views)
-            resolve(null)
-        })
-
-    },
-    addVisitedView({ commit }, view) {
-        commit('ADD_VISITED_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])
-        })
-    },
-    clearVisitedView({ commit, state }){
-        commit('CLEAR_VISITED_VIEW')
-    },
-    delAllViews({ commit, state }) {
-        return new Promise((resolve) => {
-            commit('DEL_ALL_VIEWS')
-            resolve([...state.visitedViews])
-        })
-    }
-}
-
-
-
-const tagsView:Module<any, any> = {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-}
-
-export default tagsView

src/store/modules/user.ts

@@ -1,64 +0,0 @@
-import {Module} from "vuex";
-import { getToken, setToken, removeToken } from '@/utils/auth'
-const state = {
-    token: getToken(),
-    userInfo:localStorage.userInfo?JSON.parse(localStorage.userInfo):{},
-    roles: localStorage.roles?JSON.parse(localStorage.roles):[],
-}
-
-const mutations = {
-    SET_TOKEN: (state, token) => {
-        state.token = token
-    },
-    SET_INFO: (state, userInfo) => {
-        localStorage.userInfo = JSON.stringify(userInfo)
-        state.userInfo = userInfo
-    },
-    SET_ROLES: (state, roles) => {
-        localStorage.roles = JSON.stringify(roles)
-        state.roles = roles
-    }
-}
-
-
-const actions = {
-    // 登录
-    login({ commit,dispatch }, userInfo) {
-        const { username, password } = userInfo
-        return new Promise(async (resolve, reject) => {
-            commit('SET_TOKEN', username)
-
-            commit('SET_INFO', userInfo)
-            await dispatch('getInfo', ['admin']) // 获取权限列表 默认就是超级管理员，因为没有进行接口请求 写死
-            setToken(username)
-            resolve(username)
-        })
-    },
-    // 获取用户信息 ，如实际应用中 可以通过token通过请求接口在这里获取用户信息
-    getInfo({ commit, state },roles) {
-        return new Promise((resolve, reject) =>{
-            commit('SET_ROLES', roles)
-            resolve(roles)
-        } )
-    },
-    // 退出
-    logout({ commit, state, dispatch }) {
-        return new Promise((resolve, reject) => {
-            removeToken()
-            commit('SET_TOKEN', '')
-            commit('SET_INFO', '')
-            commit('SET_ROLES', '')
-            resolve(null)
-        })
-    },
-}
-
-
-const user:Module<any, any> = {
-    namespaced:true,
-    state,
-    actions,
-    mutations,
-}
-
-export default user

src/storeNew/index.ts

@@ -1,26 +0,0 @@
-import {defineStore,createPinia} from 'pinia'
-// 引入持久化插件
-import piniaPluginPersistedstate  from 'pinia-plugin-persistedstate'
-
-export const Store = defineStore({
-    // id: 必须的，在所有 Store 中唯一
-    id:'globalState',
-    // state: 返回对象的函数
-    state: ()=>({
-
-    }),
-    getters: {},
-    actions:{},
-    persist: {
-        // 本地存储的名称
-        key: "globalState",
-        //保存的位置
-        storage: window.sessionStorage,//localstorage
-    },
-})
-
-
-const pinia = createPinia();
-//pinia使用
-pinia.use(piniaPluginPersistedstate);
-export default pinia

src/storeNew/modules/permission.ts

@@ -1,83 +0,0 @@
-import {defineStore} from 'pinia'
-import { asyncRoutes, constantRoutes } from '@/router/index'
-/**
- * 通过递归过滤异步路由表
- * @param routes asyncRoutes
- * @param roles
- */
-export function filterAsyncRoutes(routes, roles) {
-    const res = []
-    routes.forEach(route => {
-        const tmp = { ...route }
-        if (hasPermission(roles, tmp)) {
-            if (tmp.children) {
-                tmp.children = filterAsyncRoutes(tmp.children, roles)
-            }
-            res.push(tmp)
-        }
-    })
-    return res
-}
-
-/**
- * 使用 meta.role 来确定当前用户是否具有权限
- * @param roles
- * @param route
- */
-function hasPermission(roles, route) {
-    if (route.meta && route.meta.roles) {
-        return roles.some(role => route.meta.roles.includes(role))
-    } else {
-        // return true
-        return false
-    }
-}
-
-
-
-export const usePermissionStore = defineStore({
-    // id: 必须的，在所有 Store 中唯一
-    id:'permissionState',
-    // state: 返回对象的函数
-    state: ()=>({
-        // 路由
-        routes:[],
-        // 动态路由
-        addRoutes:{},
-    }),
-    getters: {
-        permission_routes:state=> {
-            return state.routes
-        }
-    },
-    // 可以同步 也可以异步
-    actions:{
-        // 生成路由
-        generateRoutes(roles){
-            return new Promise(resolve => {
-                // 在这判断是否有权限，哪些角色拥有哪些权限
-                let accessedRoutes
-                if (roles&&roles.length&&!roles.includes('admin')) {
-                    accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-                } else {
-                    accessedRoutes = asyncRoutes || []
-                }
-                this.routes = constantRoutes.concat(accessedRoutes)
-                this.addRoutes = accessedRoutes
-                resolve(accessedRoutes)
-            })
-        },
-        // 清楚路由
-        clearRoutes(){
-            this.routes = []
-            this.addRoutes = []
-        }
-    },
-    // persist: {
-    //     // 本地存储的名称
-    //     key: "permissionState",
-    //     //保存的位置
-    //     storage: window.localStorage,//localstorage
-    // },
-
-})

src/storeNew/modules/setting.ts

@@ -1,66 +0,0 @@
-import {defineStore} from 'pinia'
-import {PRIMARY_COLOR} from "../../config";
-
-
-export const useSettingStore = defineStore({
-    // id: 必须的，在所有 Store 中唯一
-    id:'settingState',
-    // state: 返回对象的函数
-    state: ()=>({
-        // menu 是否收缩
-        isCollapse:true,
-        //
-        withoutAnimation:false,
-        device: 'desktop',
-        // 刷新当前页
-        isReload:true,
-        // 主题设置
-        themeConfig:{
-            // 显示设置
-            showSetting:false,
-            // 菜单展示模式 默认 vertical   horizontal / vertical
-            mode: 'vertical',
-            // tagsView 是否展示 默认展示
-            showTag:true,
-            // 页脚
-            footer: true,
-            // 深色模式 切换暗黑模式
-            isDark: false,
-            // 显示侧边栏Logo
-            showLogo:true,
-            // 主题颜色
-            primary:PRIMARY_COLOR,
-            // element组件大小
-            globalComSize:'default'
-        },
-    }),
-    getters: {},
-    // 可以同步 也可以异步
-    actions:{
-        // 设置主题
-        setThemeConfig({key, val}){
-            this.themeConfig[key] = val
-        },
-        // 切换 Collapse
-        setCollapse(value){
-            this.isCollapse = value
-            this.withoutAnimation = false
-        },
-        // 关闭侧边栏
-        closeSideBar({withoutAnimation}){
-            this.isCollapse = false
-            this.withoutAnimation = withoutAnimation
-        },
-        toggleDevice(device){
-            this.device = device
-        }
-    },
-    // 这部分数据不需要存储
-    // persist: {
-    //     // 本地存储的名称
-    //     key: "settingState",
-    //     //保存的位置
-    //     storage: window.localStorage,//localstorage
-    // },
-
-})

src/storeNew/modules/user.ts

@@ -1,56 +0,0 @@
-import {defineStore} from 'pinia'
-
-
-export const useUserStore = defineStore({
-    // id: 必须的，在所有 Store 中唯一
-    id:'userState',
-    // state: 返回对象的函数
-    state: ()=>({
-        // 登录token
-        token:null,
-        // 登录用户信息
-        userInfo:{},
-        // 角色
-        roles:[]
-
-    }),
-    getters: {},
-    // 可以同步 也可以异步
-    actions:{
-        // 登录
-        login(userInfo){
-            const { username, password } = userInfo
-            return new Promise(async (resolve, reject) => {
-                this.token = username
-                this.userInfo = userInfo
-                await this.getRoles()
-                resolve(username)
-            })
-        },
-        // 获取用户授权角色信息，实际应用中 可以通过token通过请求接口在这里获取用户信息
-        getRoles(){
-            return new Promise((resolve, reject) =>{
-                // 获取权限列表 默认就是超级管理员，因为没有进行接口请求 写死
-                this.roles = ['admin']
-                resolve(this.roles)
-            } )
-        },
-        // 退出
-        logout() {
-            return new Promise((resolve, reject) => {
-                this.token = null
-                this.userInfo = {}
-                this.roles = []
-                resolve(null)
-            })
-        },
-
-    },
-    persist: {
-        // 本地存储的名称
-        key: "userState",
-        //保存的位置
-        storage: window.localStorage,//localstorage
-    },
-
-})

src/views/login/index.vue

@@ -64,7 +64,7 @@
   import { ref, reactive } from 'vue'
   import type { FormInstance } from 'element-plus'
   import { useRouter } from 'vue-router'
-  import {useUserStore} from "@/storeNew/modules/user"
+  import {useUserStore} from "@/store/modules/user"
   import { ElMessage } from 'element-plus'
   const ruleFormRef = ref<FormInstance>()
   const router = useRouter()

src/views/permission/page.vue

@@ -10,16 +10,16 @@
 
 <script lang="ts" setup>
   import { computed, ref } from 'vue'
-  import { useStore } from 'vuex'
-  const store = useStore()
+  import {useUserStore} from "@/store/modules/user"
+  const UserStore = useUserStore()
 
   const switchRoles = computed({
     get() {
-      return store.getters.roles[0]
+      return UserStore.roles[0]
     },
     set(val) {
       ;(async () => {
-        await store.dispatch('user/getInfo', [val])
+        await UserStore.getInfo([val])
         location.reload()
       })()
     },