From 2fc9dc57d50cf48f4b02494255c8b89f11191042 Mon Sep 17 00:00:00 2001 From: zouzhibing Date: Wed, 31 Aug 2022 11:02:49 +0800 Subject: [PATCH] =?UTF-8?q?feature:=E5=8E=BB=E6=8E=89=E5=8E=9F=E6=9D=A5?= =?UTF-8?q?=E7=9A=84store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/index.ts | 26 ++++++++++ src/store/modules/permission.ts | 83 +++++++++++++++++++++++++++++++ src/store/modules/setting.ts | 73 +++++++++++++++++++++++++++ src/store/modules/tagsView.ts | 87 +++++++++++++++++++++++++++++++++ src/store/modules/user.ts | 56 +++++++++++++++++++++ 5 files changed, 325 insertions(+) create mode 100644 src/store/index.ts create mode 100644 src/store/modules/permission.ts create mode 100644 src/store/modules/setting.ts create mode 100644 src/store/modules/tagsView.ts create mode 100644 src/store/modules/user.ts diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..6714864 --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,26 @@ +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 diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts new file mode 100644 index 0000000..fcc28e0 --- /dev/null +++ b/src/store/modules/permission.ts @@ -0,0 +1,83 @@ +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 + // }, + +}) diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts new file mode 100644 index 0000000..04750fd --- /dev/null +++ b/src/store/modules/setting.ts @@ -0,0 +1,73 @@ +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 + }, + // 刷新 + setReload(){ + this.isReload = false + setTimeout(()=>{ + this.isReload = true + },50) + } + }, + // 这部分数据不需要存储 + // persist: { + // // 本地存储的名称 + // key: "settingState", + // //保存的位置 + // storage: window.localStorage,//localstorage + // }, + +}) diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts new file mode 100644 index 0000000..f006622 --- /dev/null +++ b/src/store/modules/tagsView.ts @@ -0,0 +1,87 @@ +import {defineStore} from 'pinia' + + +export const useTagsViewStore = defineStore({ + // id: 必须的，在所有 Store 中唯一 + id:'tagsViewState', + // state: 返回对象的函数 + state: ()=>({ + visitedViews:[], + cachedViews:[], + + }), + getters: {}, + // 可以同步 也可以异步 + actions:{ + addView(view){ + this.addVisitedView(view) + }, + removeView(routes){ + return new Promise((resolve, reject) => { + this.visitedViews = this.visitedViews.filter(item=>!routes.includes(item.path)) + resolve(null) + }) + }, + addVisitedView(view){ + if (this.visitedViews.some(v => v.path === view.path)) return + this.visitedViews.push( + Object.assign({}, view, { + title: view.meta.title || 'no-name' + }) + ) + if (view.meta.keepAlive) { + 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 => { + this.visitedViews = this.visitedViews.filter(v=>{ + return v.path !== view.path + }) + this.cachedViews = this.cachedViews.filter(v=>{ + return v.path !== view.path + }) + 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]) + }) + + }, + clearVisitedView(){ + this.delAllViews() + }, + delAllViews(){ + return new Promise((resolve) => { + this.visitedViews = [] + this.visitedViews = [] + resolve([...this.visitedViews]) + }) + }, + updateVisitedView(view){ + for (let v of this.visitedViews) { + if (v.path === view.path) { + v = Object.assign(v, view) + break + } + } + } + }, + +}) diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts new file mode 100644 index 0000000..3002aca --- /dev/null +++ b/src/store/modules/user.ts @@ -0,0 +1,56 @@ +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 + }, + +})