From 44ad220cdd7eb3c967a4ccac0b2e5b0c0e22738e Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期日, 29 五月 2022 21:40:32 +0800 Subject: [PATCH] 使用Pinia代替Vuex进行数据存储 --- src/views/system/user/profile/userAvatar.vue | 9 src/layout/components/Navbar.vue | 22 src/layout/index.vue | 27 src/store/modules/settings.js | 66 +- src/utils/dynamicTitle.js | 6 src/layout/components/Sidebar/Logo.vue | 5 src/plugins/tab.js | 20 src/layout/components/Sidebar/index.vue | 17 src/store/modules/app.js | 103 ++--- src/components/HeaderSearch/index.vue | 4 src/permission.js | 14 src/store/modules/user.js | 154 +++---- src/store/index.js | 20 - src/store/modules/permission.js | 87 ++-- src/layout/components/TagsView/index.vue | 16 src/components/SizeSelect/index.vue | 34 - src/utils/permission.js | 6 src/utils/request.js | 4 /dev/null | 18 src/store/modules/tagsView.js | 354 +++++++---------- src/views/login.vue | 5 vite/plugins/auto-import.js | 4 src/layout/components/TagsView/ScrollPane.vue | 6 package.json | 6 src/components/TopNav/index.vue | 21 src/directive/permission/hasRole.js | 4 src/layout/components/AppMain.vue | 8 src/directive/permission/hasPermi.js | 4 src/layout/components/Settings/index.vue | 52 - src/plugins/auth.js | 6 30 files changed, 479 insertions(+), 623 deletions(-) diff --git a/package.json b/package.json index f7193d5..5fbdb40 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "license": "MIT", "scripts": { "dev": "vite", - "build:prod": "vite build", + "build:prod": "vite build", "build:stage": "vite build --mode staging", "preview": "vite preview" }, @@ -25,10 +25,10 @@ "js-cookie": "3.0.1", "jsencrypt": "3.2.1", "nprogress": "0.2.0", + "pinia": "2.0.14", "vue": "3.2.31", "vue-cropper": "1.0.3", - "vue-router": "4.0.14", - "vuex": "4.0.2" + "vue-router": "4.0.14" }, "devDependencies": { "@vitejs/plugin-vue": "2.3.3", diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue index 317df49..89acd33 100644 --- 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 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 diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue index 289d4a0..f3cf567 100644 --- a/src/components/SizeSelect/index.vue +++ b/src/components/SizeSelect/index.vue @@ -16,36 +16,24 @@ </template> <script setup> -import { ElMessage } from 'element-plus' +import useAppStore from "@/store/modules/app"; -const store = useStore(); -const size = computed(() => store.getters.size); +const appStore = useAppStore(); +const size = computed(() => appStore.size); const route = useRoute(); const router = useRouter(); -const {proxy} = getCurrentInstance(); +const { proxy } = getCurrentInstance(); const sizeOptions = ref([ - { label: '杈冨ぇ', value: 'large' }, - { label: '榛樿', value: 'default' }, - { label: '绋嶅皬', value: 'small' }, -]) + { label: "杈冨ぇ", value: "large" }, + { label: "榛樿", value: "default" }, + { label: "绋嶅皬", value: "small" }, +]); -function refreshView() { - // In order to make the cached page re-rendered - store.dispatch('tagsView/delAllCachedViews', route) - - const { fullPath } = route - - nextTick(() => { - router.replace({ - path: '/redirect' + fullPath - }) - }) -} function handleSetSize(size) { proxy.$modal.loading("姝e湪璁剧疆甯冨眬澶у皬锛岃绋嶅��..."); - store.dispatch('app/setSize', size) - setTimeout("window.location.reload()", 1000) -}; + appStore.setSize(size); + setTimeout("window.location.reload()", 1000); +} </script> <style lang='scss' scoped> diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue index e3e5c97..003e5f6 100644 --- a/src/components/TopNav/index.vue +++ b/src/components/TopNav/index.vue @@ -30,6 +30,9 @@ <script setup> import { constantRoutes } from "@/router" import { isHttp } from '@/utils/validate' +import useAppStore from '@/store/modules/app' +import useSettingsStore from '@/store/modules/settings' +import usePermissionStore from '@/store/modules/permission' // 椤堕儴鏍忓垵濮嬫暟 const visibleNumber = ref(null); @@ -38,14 +41,16 @@ // 闅愯棌渚ц竟鏍忚矾鐢� const hideList = ['/index', '/user/profile']; -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(() => { @@ -91,10 +96,10 @@ if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) { const tmpPath = path.substring(1, path.length); activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); - store.dispatch('app/toggleSideBarHide', false); + appStore.toggleSideBarHide(false); } else if(!route.children) { activePath = path; - store.dispatch('app/toggleSideBarHide', true); + appStore.toggleSideBarHide(true); } activeRoutes(activePath); return activePath; @@ -114,11 +119,11 @@ } else if (!route || !route.children) { // 娌℃湁瀛愯矾鐢辫矾寰勫唴閮ㄦ墦寮� router.push({ path: key }); - store.dispatch('app/toggleSideBarHide', true); + appStore.toggleSideBarHide(true); } else { // 鏄剧ず宸︿晶鑱斿姩鑿滃崟 activeRoutes(key); - store.dispatch('app/toggleSideBarHide', false); + appStore.toggleSideBarHide(false); } } @@ -132,7 +137,7 @@ }); } if(routes.length > 0) { - store.commit("SET_SIDEBAR_ROUTERS", routes); + permissionStore.setSidebarRouters(routes); } return routes; } diff --git a/src/directive/permission/hasPermi.js b/src/directive/permission/hasPermi.js index 5000285..4581e01 100644 --- a/src/directive/permission/hasPermi.js +++ b/src/directive/permission/hasPermi.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 all_permission = "*:*:*"; - const permissions = store.getters && store.getters.permissions + const permissions = useUserStore().permissions if (value && value instanceof Array && value.length > 0) { const permissionFlag = value diff --git a/src/directive/permission/hasRole.js b/src/directive/permission/hasRole.js index d65eb27..2c3217c 100644 --- 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 diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 2dd6548..ab03c25 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -11,11 +11,13 @@ </template> <script setup> -let store = useStore() +import useTagsViewStore from '@/store/modules/tagsview' + +const tagsViewStore = useTagsViewStore() const route = useRoute() -store.dispatch('tagsView/addCachedView', route) +tagsViewStore.addCachedView(route) const cachedViews = computed(() => { - return store.state.tagsView.cachedViews + return tagsViewStore.cachedViews }) </script> diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index a4cf784..8a2605d 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,11 +1,11 @@ <template> <div class="navbar"> - <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> - <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" /> + <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> + <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /> + <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> <div class="right-menu"> - <template v-if="getters.device !== 'mobile'"> + <template v-if="appStore.device !== 'mobile'"> <header-search id="header-search" class="right-menu-item" /> <el-tooltip content="婧愮爜鍦板潃" effect="dark" placement="bottom"> @@ -25,7 +25,7 @@ <div class="avatar-container"> <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> <div class="avatar-wrapper"> - <img :src="getters.avatar" class="user-avatar" /> + <img :src="userStore.avatar" class="user-avatar" /> <el-icon><caret-bottom /></el-icon> </div> <template #dropdown> @@ -57,12 +57,16 @@ import HeaderSearch from '@/components/HeaderSearch' import RuoYiGit from '@/components/RuoYi/Git' import RuoYiDoc from '@/components/RuoYi/Doc' +import useAppStore from '@/store/modules/app' +import useUserStore from '@/store/modules/user' +import useSettingsStore from '@/store/modules/settings' -const store = useStore(); -const getters = computed(() => store.getters); +const appStore = useAppStore() +const userStore = useUserStore() +const settingsStore = useSettingsStore() function toggleSideBar() { - store.dispatch('app/toggleSideBar') + appStore.toggleSideBar() } function handleCommand(command) { @@ -84,7 +88,7 @@ cancelButtonText: '鍙栨秷', type: 'warning' }).then(() => { - store.dispatch('LogOut').then(() => { + userStore.logOut().then(() => { location.href = '/index'; }) }).catch(() => { }); diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue index d74045a..ff1fa50 100644 --- a/src/layout/components/Settings/index.vue +++ b/src/layout/components/Settings/index.vue @@ -84,26 +84,28 @@ import axios from 'axios' import { ElLoading, ElMessage } from 'element-plus' import { useDynamicTitle } from '@/utils/dynamicTitle' +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"]); /** 鏄惁闇�瑕乼opnav */ 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); } } }) @@ -111,57 +113,39 @@ 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 }) } }) /**鏄惁闇�瑕佷晶杈规爮鐨刲ogo */ 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() } }) function themeChange(val) { - store.dispatch('settings/changeSetting', { - key: 'theme', - value: val - }) + settingsStore.changeSetting({ key: 'theme', value: val }) theme.value = val; } function handleTheme(val) { - store.dispatch('settings/changeSetting', { - key: 'sideTheme', - value: val - }) + settingsStore.changeSetting({ key: 'sideTheme', value: val }) sideTheme.value = val; } function saveSetting() { diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index c13a451..962600e 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -16,6 +16,7 @@ <script setup> import variables from '@/assets/styles/variables.module.scss' import logo from '@/assets/logo/logo.png' +import useSettingsStore from '@/store/modules/settings' defineProps({ collapse: { @@ -25,8 +26,8 @@ }) const title = ref('鑻ヤ緷绠$悊绯荤粺'); -const store = useStore(); -const sideTheme = computed(() => store.state.settings.sideTheme); +const settingsStore = useSettingsStore(); +const sideTheme = computed(() => settingsStore.sideTheme); </script> <style lang="scss" scoped> diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 30e7ad5..646bb63 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -27,15 +27,20 @@ import Logo from './Logo' import SidebarItem from './SidebarItem' import variables from '@/assets/styles/variables.module.scss' +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; diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue index 77eb0b3..0b9fb59 100644 --- a/src/layout/components/TagsView/ScrollPane.vue +++ b/src/layout/components/TagsView/ScrollPane.vue @@ -10,6 +10,8 @@ </template> <script setup> +import useTagsViewStore from '@/store/modules/tagsview' + const tagAndTagSpacing = ref(4); const { proxy } = getCurrentInstance(); @@ -32,8 +34,8 @@ 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 diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index eb150d9..aea389e 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -44,6 +44,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); @@ -53,13 +56,12 @@ 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() @@ -131,14 +133,14 @@ 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 } @@ -149,7 +151,7 @@ scrollPaneRef.value.moveToTarget(r); // when query is different then update if (r.fullPath !== route.fullPath) { - store.dispatch('tagsView/updateVisitedView', route) + useTagsViewStore().updateVisitedView(route) } } } diff --git a/src/layout/index.vue b/src/layout/index.vue index 419c80a..52d821b 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -19,13 +19,16 @@ import { AppMain, Navbar, Settings, TagsView } from './components' import defaultSettings from '@/settings' -const store = useStore(); -const theme = computed(() => store.state.settings.theme); -const sideTheme = computed(() => store.state.settings.sideTheme); -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); +import useAppStore from '@/store/modules/app' +import useSettingsStore from '@/store/modules/settings' + +const settingsStore = useSettingsStore() +const theme = computed(() => settingsStore.theme); +const sideTheme = computed(() => settingsStore.sideTheme); +const sidebar = computed(() => useAppStore().sidebar); +const device = computed(() => useAppStore().device); +const needTagsView = computed(() => settingsStore.tagsView); +const fixedHeader = computed(() => settingsStore.fixedHeader); const classObj = computed(() => ({ hideSidebar: !sidebar.value.opened, @@ -39,18 +42,18 @@ watchEffect(() => { if (device.value === 'mobile' && sidebar.value.opened) { - store.dispatch('app/closeSideBar', { withoutAnimation: false }) + useAppStore().closeSideBar({ withoutAnimation: false }) } if (width.value - 1 < WIDTH) { - store.dispatch('app/toggleDevice', 'mobile') - store.dispatch('app/closeSideBar', { withoutAnimation: true }) + useAppStore().toggleDevice('mobile') + useAppStore().closeSideBar({ withoutAnimation: true }) } else { - store.dispatch('app/toggleDevice', 'desktop') + useAppStore().toggleDevice('desktop') } }) function handleClickOutside() { - store.dispatch('app/closeSideBar', { withoutAnimation: false }) + useAppStore().closeSideBar({ withoutAnimation: false }) } const settingRef = ref(null); diff --git a/src/permission.js b/src/permission.js index 82a8a59..d6ea76b 100644 --- a/src/permission.js +++ b/src/permission.js @@ -1,11 +1,13 @@ 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 { isRelogin } from '@/utils/request' +import useUserStore from '@/store/modules/user' +import useSettingsStore from '@/store/modules/settings' +import usePermissionStore from '@/store/modules/permission' NProgress.configure({ showSpinner: false }); @@ -14,18 +16,18 @@ 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) { isRelogin.show = true // 鍒ゆ柇褰撳墠鐢ㄦ埛鏄惁宸叉媺鍙栧畬user_info淇℃伅 - store.dispatch('GetInfo').then(() => { + useUserStore().getInfo().then(() => { isRelogin.show = false - store.dispatch('GenerateRoutes').then(accessRoutes => { + usePermissionStore().generateRoutes().then(accessRoutes => { // 鏍规嵁roles鏉冮檺鐢熸垚鍙闂殑璺敱琛� accessRoutes.forEach(route => { if (!isHttp(route.path)) { @@ -35,7 +37,7 @@ next({ ...to, replace: true }) // hack鏂规硶 纭繚addRoutes宸插畬鎴� }) }).catch(err => { - store.dispatch('LogOut').then(() => { + useUserStore().logOut().then(() => { ElMessage.error(err) next({ path: '/' }) }) diff --git a/src/plugins/auth.js b/src/plugins/auth.js index af740aa..5f38cfa 100644 --- 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().permissions if (permission && permission.length > 0) { return permissions.some(v => { return all_permission === v || v === permission @@ -14,7 +14,7 @@ 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 diff --git a/src/plugins/tab.js b/src/plugins/tab.js index d9fd580..cc332b5 100644 --- 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 @@ } }); } - 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 @@ }, // 鍏抽棴褰撳墠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 @@ // 鍏抽棴鎸囧畾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); }, // 鍏抽棴鎵�鏈塼ab椤电 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 @@ }, // 淇敼tab椤电 updatePage(obj) { - return store.dispatch('tagsView/updateVisitedView', obj); + return useTagsViewStore().updateVisitedView(obj); } } diff --git a/src/store/getters.js b/src/store/getters.js deleted file mode 100644 index b849306..0000000 --- a/src/store/getters.js +++ /dev/null @@ -1,18 +0,0 @@ -const getters = { - sidebar: state => state.app.sidebar, - size: state => state.app.size, - device: state => state.app.device, - 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, - introduction: state => state.user.introduction, - roles: state => state.user.roles, - permissions: state => state.user.permissions, - permission_routes: state => state.permission.routes, - topbarRouters:state => state.permission.topbarRouters, - defaultRoutes:state => state.permission.defaultRoutes, - sidebarRouters:state => state.permission.sidebarRouters, -} -export default getters \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 3445d54..cd73385 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,21 +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' - -const store = createStore({ - modules: { - app, - user, - tagsView, - permission, - settings - }, - getters -}); - +const store = createPinia() export default store \ No newline at end of file diff --git a/src/store/modules/app.js b/src/store/modules/app.js index 468299e..fc34125 100644 --- a/src/store/modules/app.js +++ b/src/store/modules/app.js @@ -1,66 +1,47 @@ 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') || 'default' -} -const mutations = { - TOGGLE_SIDEBAR: state => { - if (state.sidebar.hide) { - return false; +const useAppStore = defineStore( + 'app', + { + state: () => ({ + sidebar: { + opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, + withoutAnimation: false, + hide: false + }, + device: 'desktop', + size: Cookies.get('size') || 'default' + }), + 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 + } } - state.sidebar.opened = !state.sidebar.opened - state.sidebar.withoutAnimation = false - 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 - } -} + }) -const actions = { - toggleSideBar({ commit }) { - commit('TOGGLE_SIDEBAR') - }, - closeSideBar({ commit }, { withoutAnimation }) { - commit('CLOSE_SIDEBAR', withoutAnimation) - }, - toggleDevice({ commit }, device) { - commit('TOGGLE_DEVICE', device) - }, - setSize({ commit }, size) { - commit('SET_SIZE', size) - }, - toggleSideBarHide({ commit }, status) { - commit('SET_SIDEBAR_HIDE', status) - } -} - -export default { - namespaced: true, - state, - mutations, - actions -} +export default useAppStore diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js index 1b58c6f..d568108 100644 --- a/src/store/modules/permission.js +++ b/src/store/modules/permission.js @@ -7,51 +7,50 @@ // 鍖归厤views閲岄潰鎵�鏈夌殑.vue鏂囦欢 const modules = import.meta.glob('./../../views/**/*.vue') -const permission = { - state: { - routes: [], - addRoutes: [], - defaultRoutes: [], - topbarRouters: [], - sidebarRouters: [] - }, - mutations: { - SET_ROUTES: (state, routes) => { - state.addRoutes = 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 - }, - }, - actions: { - // 鐢熸垚璺敱 - GenerateRoutes({ commit }) { - return new Promise(resolve => { - // 鍚戝悗绔姹傝矾鐢辨暟鎹� - getRouters().then(res => { - const sdata = JSON.parse(JSON.stringify(res.data)) - const rdata = JSON.parse(JSON.stringify(res.data)) - const defaultData = JSON.parse(JSON.stringify(res.data)) - 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', defaultRoutes) - resolve(rewriteRoutes) +const usePermissionStore = defineStore( + 'permission', + { + state: () => ({ + routes: [], + addRoutes: [], + defaultRoutes: [], + topbarRouters: [], + 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(roles) { + return new Promise(resolve => { + // 鍚戝悗绔姹傝矾鐢辨暟鎹� + getRouters().then(res => { + const sdata = JSON.parse(JSON.stringify(res.data)) + const rdata = JSON.parse(JSON.stringify(res.data)) + const defaultData = JSON.parse(JSON.stringify(res.data)) + const sidebarRoutes = filterAsyncRouter(sdata) + const rewriteRoutes = filterAsyncRouter(rdata, false, true) + const defaultRoutes = filterAsyncRouter(defaultData) + this.setRoutes(rewriteRoutes) + this.setSidebarRouters(constantRoutes.concat(sidebarRoutes)) + this.setDefaultRoutes(sidebarRoutes) + this.setTopbarRoutes(defaultRoutes) + resolve(rewriteRoutes) + }) }) - }) + } } - } -} + }) // 閬嶅巻鍚庡彴浼犳潵鐨勮矾鐢卞瓧绗︿覆锛岃浆鎹负缁勪欢瀵硅薄 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) { @@ -116,4 +115,4 @@ return res; } -export default permission +export default usePermissionStore diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 06b91d2..3e41513 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -4,41 +4,35 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' -const state = { - title: '', - theme: storageSetting.theme || '#409EFF', - 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 -} -const mutations = { - CHANGE_SETTING: (state, { key, value }) => { - if (state.hasOwnProperty(key)) { - state[key] = value + +const useSettingsStore = defineStore( + 'settings', + { + state: () => ({ + title: '', + theme: storageSetting.theme || '#409EFF', + 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 + }), + actions: { + // 淇敼甯冨眬璁剧疆 + changeSetting(data) { + const { key, value } = data + if (this.hasOwnProperty(key)) { + this[key] = value + } + }, + // 璁剧疆缃戦〉鏍囬 + setTitle(title) { + this.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 useSettingsStore diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js index 93d4404..34506a6 100644 --- a/src/store/modules/tagsView.js +++ b/src/store/modules/tagsView.js @@ -1,207 +1,153 @@ -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( + 'tags-view', + { + 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) { + 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 + }) } } - }, - 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 diff --git a/src/store/modules/user.js b/src/store/modules/user.js index bfdf2f1..20350e4 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -2,97 +2,69 @@ import { getToken, setToken, removeToken } from '@/utils/auth' import defAva from '@/assets/images/profile.jpg' -const user = { - state: { - token: getToken(), - name: '', - avatar: '', - roles: [], - permissions: [] - }, +const useUserStore = defineStore( + 'user', + { + state: () => ({ + token: getToken(), + name: '', + avatar: '', + roles: [], + permissions: [] + }), + actions: { + // 鐧诲綍 + login(userInfo) { + const username = userInfo.username.trim() + const password = userInfo.password + const code = userInfo.code + const uuid = userInfo.uuid + return new Promise((resolve, reject) => { + login(username, password, code, uuid).then(res => { + setToken(res.token) + this.token = res.token + resolve() + }).catch(error => { + reject(error) + }) + }) + }, + // 鑾峰彇鐢ㄦ埛淇℃伅 + getInfo() { + return new Promise((resolve, reject) => { + getInfo().then(res => { + const user = res.user + const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar; - 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 + if (res.roles && res.roles.length > 0) { // 楠岃瘉杩斿洖鐨剅oles鏄惁鏄竴涓潪绌烘暟缁� + this.roles = res.roles + this.permissions = res.permissions + } else { + this.setRoutes = ['ROLE_DEFAULT'] + } + this.name = user.userName + this.avatar = avatar; + resolve(res) + }).catch(error => { + reject(error) + }) + }) + }, + // 閫�鍑虹郴缁� + logOut() { + return new Promise((resolve, reject) => { + logout(this.token).then(() => { + this.token = '' + this.roles = [] + this.permissions = [] + removeToken() + resolve() + }).catch(error => { + reject(error) + }) + }) + } } - }, + }) - actions: { - // 鐧诲綍 - Login({ commit }, userInfo) { - const username = userInfo.username.trim() - const password = userInfo.password - const code = userInfo.code - const uuid = userInfo.uuid - return new Promise((resolve, reject) => { - login(username, password, code, uuid).then(res => { - setToken(res.token) - commit('SET_TOKEN', res.token) - resolve() - }).catch(error => { - reject(error) - }) - }) - }, - - // 鑾峰彇鐢ㄦ埛淇℃伅 - GetInfo({ commit, state }) { - return new Promise((resolve, reject) => { - getInfo().then(res => { - const user = res.user - const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar; - - if (res.roles && res.roles.length > 0) { // 楠岃瘉杩斿洖鐨剅oles鏄惁鏄竴涓潪绌烘暟缁� - commit('SET_ROLES', res.roles) - commit('SET_PERMISSIONS', res.permissions) - } else { - commit('SET_ROLES', ['ROLE_DEFAULT']) - } - commit('SET_NAME', user.userName) - commit('SET_AVATAR', avatar) - resolve(res) - }).catch(error => { - reject(error) - }) - }) - }, - - // 閫�鍑虹郴缁� - LogOut({ commit, state }) { - return new Promise((resolve, reject) => { - logout(state.token).then(() => { - commit('SET_TOKEN', '') - commit('SET_ROLES', []) - commit('SET_PERMISSIONS', []) - removeToken() - resolve() - }).catch(error => { - reject(error) - }) - }) - }, - - // 鍓嶇 鐧诲嚭 - FedLogOut({ commit }) { - return new Promise(resolve => { - commit('SET_TOKEN', '') - removeToken() - resolve() - }) - } - } -} - -export default user +export default useUserStore diff --git a/src/utils/dynamicTitle.js b/src/utils/dynamicTitle.js index 02d625e..b55d6a1 100644 --- 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; } diff --git a/src/utils/permission.js b/src/utils/permission.js index 25d1a02..93b772d 100644 --- a/src/utils/permission.js +++ b/src/utils/permission.js @@ -1,4 +1,4 @@ -import store from '@/store' +import useUserStore from '@/store/modules/user' /** * 瀛楃鏉冮檺鏍¢獙 @@ -7,7 +7,7 @@ */ export function checkPermi(value) { if (value && value instanceof Array && value.length > 0) { - const permissions = store.getters && store.getters.permissions + const permissions = useUserStore().permissions const permissionDatas = value const all_permission = "*:*:*"; @@ -32,7 +32,7 @@ */ export function checkRole(value) { if (value && value instanceof Array && value.length > 0) { - const roles = store.getters && store.getters.roles + const roles = useUserStore().roles const permissionRoles = value const super_admin = "admin"; diff --git a/src/utils/request.js b/src/utils/request.js index e82383a..79c720c 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -1,11 +1,11 @@ import axios from 'axios' import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus' -import store from '@/store' import { getToken } from '@/utils/auth' import errorCode from '@/utils/errorCode' import { tansParams, blobValidate } from '@/utils/ruoyi' import cache from '@/plugins/cache' import { saveAs } from 'file-saver' +import useUserStore from '@/store/modules/user' let downloadLoadingInstance; // 鏄惁鏄剧ず閲嶆柊鐧诲綍 @@ -85,7 +85,7 @@ } ).then(() => { isRelogin.show = false; - store.dispatch('LogOut').then(() => { + useUserStore().logOut().then(() => { location.href = '/index'; }) }).catch(() => { diff --git a/src/views/login.vue b/src/views/login.vue index 73000f5..59ba396 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -68,8 +68,9 @@ import { getCodeImg } from "@/api/login"; import Cookies from "js-cookie"; import { encrypt, decrypt } from "@/utils/jsencrypt"; +import useUserStore from '@/store/modules/user' -const store = useStore(); +const userStore = useUserStore() const router = useRouter(); const { proxy } = getCurrentInstance(); @@ -111,7 +112,7 @@ Cookies.remove("rememberMe"); } // 璋冪敤action鐨勭櫥褰曟柟娉� - store.dispatch("Login", loginForm.value).then(() => { + userStore.login(loginForm.value).then(() => { router.push({ path: redirect.value || "/" }); }).catch(() => { loading.value = false; diff --git a/src/views/system/user/profile/userAvatar.vue b/src/views/system/user/profile/userAvatar.vue index 383d9f2..8e9982a 100644 --- a/src/views/system/user/profile/userAvatar.vue +++ b/src/views/system/user/profile/userAvatar.vue @@ -54,8 +54,9 @@ import "vue-cropper/dist/index.css"; import { VueCropper } from "vue-cropper"; import { uploadAvatar } from "@/api/system/user"; +import useUserStore from '@/store/modules/user' -const store = useStore(); +const userStore = useUserStore() const { proxy } = getCurrentInstance(); const open = ref(false); @@ -64,7 +65,7 @@ //鍥剧墖瑁佸壀鏁版嵁 const options = reactive({ - img: store.getters.avatar, // 瑁佸壀鍥剧墖鐨勫湴鍧� + img: userStore.avatar, // 瑁佸壀鍥剧墖鐨勫湴鍧� autoCrop: true, // 鏄惁榛樿鐢熸垚鎴浘妗� autoCropWidth: 200, // 榛樿鐢熸垚鎴浘妗嗗搴� autoCropHeight: 200, // 榛樿鐢熸垚鎴浘妗嗛珮搴� @@ -116,7 +117,7 @@ uploadAvatar(formData).then(response => { open.value = false; options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl; - store.commit("SET_AVATAR", options.img); + userStore.avatar = options.img; proxy.$modal.msgSuccess("淇敼鎴愬姛"); visible.value = false; }); @@ -128,7 +129,7 @@ }; /** 鍏抽棴绐楀彛 */ function closeDialog() { - options.img = store.getters.avatar; + options.img = userStore.avatar; options.visible = false; }; </script> diff --git a/vite/plugins/auto-import.js b/vite/plugins/auto-import.js index 498ad69..ba51689 100644 --- a/vite/plugins/auto-import.js +++ b/vite/plugins/auto-import.js @@ -5,9 +5,7 @@ imports: [ 'vue', 'vue-router', - { - 'vuex': ['useStore'] - } + 'pinia' ], dts: false }) -- Gitblit v1.9.3