feature:去掉原来的store
This commit is contained in:
zouzhibing
parent
d5e600d856
commit
2fc9dc57d5
|
|
@ -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
|
||||
|
|
@ -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
|
||||
// },
|
||||
|
||||
})
|
||||
|
|
@ -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
|
||||
// },
|
||||
|
||||
})
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
|
@ -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
|
||||
},
|
||||
|
||||
})
|
||||
Loading…
Reference in New Issue