test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-08 06:57:42 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

优化pinia使用

Browse Source
This commit is contained in:
Hooray 2022-05-10 14:42:59 +08:00
parent 76ca25a807
commit 526f51a342
30 changed files with 105 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plop-templates/store/index.hbs
View File

@ -1,7 +1,4 @@
import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
export const use{{ properCase name }}Store = defineStore(
const use{{ properCase name }}Store = defineStore(
// 唯一ID
'{{ camelCase name }}',
{
@ -11,6 +8,4 @@ export const use{{ properCase name }}Store = defineStore(
}
)
export function use{{ properCase name }}OutsideStore() {
return use{{ properCase name }}Store(piniaStore)
}
export default use{{ properCase name }}Store

2
src/App.vue
View File

@ -1,7 +1,7 @@
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
// 侧边栏主导航当前实际宽度

11
src/api/index.js
View File

@ -2,11 +2,10 @@ import axios from 'axios'
// import qs from 'qs'
import router from '@/router/index'
import { ElMessage } from 'element-plus'
import { useUserOutsideStore } from '@/store/modules/user'
import useUserStore from '@/store/modules/user'
const toLogin = () => {
const userOutsideStore = useUserOutsideStore()
userOutsideStore.logout().then(() => {
useUserStore().logout().then(() => {
router.push({
name: 'login',
query: {
@ -24,13 +23,13 @@ const api = axios.create({
api.interceptors.request.use(
request => {
const userOutsideStore = useUserOutsideStore()
const userStore = useUserStore()
/**
* 全局拦截请求发送前提交的参数
* 以下代码为示例，在请求头里带上 token 信息
*/
if (userOutsideStore.isLogin) {
request.headers['Token'] = userOutsideStore.token
if (userStore.isLogin) {
request.headers['Token'] = userStore.token
}
// 是否将 POST 请求参数进行字符串化处理
if (request.method === 'post') {

2
src/components/Copyright/index.vue
View File

@ -1,5 +1,5 @@
<script setup name="Copyright">
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
</script>

4
src/layout/components/AppSetting/index.vue
View File

@ -2,9 +2,9 @@
const { proxy } = getCurrentInstance()
const route = useRoute()
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useMenuStore } from '@/store/modules/menu'
import useMenuStore from '@/store/modules/menu'
const menuStore = useMenuStore()
const isShow = ref(false)

4
src/layout/components/Header/index.vue
View File

@ -2,9 +2,9 @@
import Logo from '../Logo/index.vue'
import Tools from '../Tools/index.vue'
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useMenuStore } from '@/store/modules/menu'
import useMenuStore from '@/store/modules/menu'
const menuStore = useMenuStore()
const switchMenu = inject('switchMenu')

2
src/layout/components/Logo/index.vue
View File

@ -1,7 +1,7 @@
<script setup name="Logo">
import imgLogo from '@/assets/images/logo.png'
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
defineProps({

4
src/layout/components/MainSidebar/index.vue
View File

@ -1,9 +1,9 @@
<script setup name="MainSidebar">
import Logo from '../Logo/index.vue'
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useMenuStore } from '@/store/modules/menu'
import useMenuStore from '@/store/modules/menu'
const menuStore = useMenuStore()
const switchMenu = inject('switchMenu')

6
src/layout/components/Search/index.vue
View File

@ -3,11 +3,11 @@ import { deepClone, isExternalLink } from '@/util'
const { proxy } = getCurrentInstance()
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useRouteStore } from '@/store/modules/route'
import useRouteStore from '@/store/modules/route'
const routeStore = useRouteStore()
import { useMenuStore } from '@/store/modules/menu'
import useMenuStore from '@/store/modules/menu'
const menuStore = useMenuStore()
const isShow = ref(false)

4
src/layout/components/SubSidebar/index.vue
View File

@ -2,9 +2,9 @@
import Logo from '../Logo/index.vue'
import SidebarItem from '../SidebarItem/index.vue'
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useMenuStore } from '@/store/modules/menu'
import useMenuStore from '@/store/modules/menu'
const menuStore = useMenuStore()
const sidebarScrollTop = ref(0)

4
src/layout/components/Tools/index.vue
View File

@ -2,9 +2,9 @@
const reload = inject('reload')
const router = useRouter()
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useUserStore } from '@/store/modules/user'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
import { useFullscreen } from '@vueuse/core'

2
src/layout/components/Topbar/index.vue
View File

@ -5,7 +5,7 @@ import Tools from '../Tools/index.vue'
const route = useRoute()
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
const enableSidebarCollapse = computed(() => {

6
src/layout/index.vue
View File

@ -11,11 +11,11 @@ import { isExternalLink } from '@/util'
const { proxy } = getCurrentInstance()
const routeInfo = useRoute(), router = useRouter()
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useKeepAliveStore } from '@/store/modules/keepAlive'
import useKeepAliveStore from '@/store/modules/keepAlive'
const keepAliveStore = useKeepAliveStore()
import { useMenuStore } from '@/store/modules/menu'
import useMenuStore from '@/store/modules/menu'
const menuStore = useMenuStore()
const showCopyright = computed(() => {

8
src/main.js
View File

@ -2,9 +2,8 @@ import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { piniaStore } from './store'
import { useSettingsOutsideStore } from './store/modules/settings'
app.use(piniaStore)
import pinia from './store'
app.use(pinia)
import router from './router'
app.use(router)
@ -21,7 +20,8 @@ import 'virtual:svg-icons-register'
// 加载 iconify 图标（element plus）
import { downloadAndInstall } from '@/iconify-ep'
if (useSettingsOutsideStore().app.iconifyOfflineUse) {
import useSettingsStore from './store/modules/settings'
if (useSettingsStore().app.iconifyOfflineUse) {
downloadAndInstall()
}

74
src/router/index.js
View File

@ -1,9 +1,9 @@
import { createRouter, createWebHashHistory } from 'vue-router'
import { useSettingsOutsideStore } from '@/store/modules/settings'
import { useKeepAliveOutsideStore } from '@/store/modules/keepAlive'
import { useUserOutsideStore } from '@/store/modules/user'
import { useMenuOutsideStore } from '@/store/modules/menu'
import { useRouteOutsideStore } from '@/store/modules/route'
import useSettingsStore from '@/store/modules/settings'
import useKeepAliveStore from '@/store/modules/keepAlive'
import useUserStore from '@/store/modules/user'
import useMenuStore from '@/store/modules/menu'
import useRouteStore from '@/store/modules/route'
import '@/assets/styles/nprogress.scss'
import { useNProgress } from '@vueuse/integrations/useNProgress'
@ -30,8 +30,8 @@ let constantRoutes = [
component: () => import('@/views/index.vue'),
meta: {
title: () => {
const settingsOutsideStore = useSettingsOutsideStore()
return settingsOutsideStore.dashboard.title
const settingsStore = useSettingsStore()
return settingsStore.dashboard.title
}
}
},
@ -140,7 +140,7 @@ const lastRoute = {
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
if (useSettingsOutsideStore().app.routeBaseOn === 'filesystem') {
if (useSettingsStore(createPinia()).app.routeBaseOn === 'filesystem') {
constantRoutes = generatedRoutes.filter(item => {
return item.meta?.enabled !== false && item.meta?.constant === true
})
@ -155,17 +155,17 @@ const router = createRouter({
})
router.beforeEach(async(to, from, next) => {
const settingsOutsideStore = useSettingsOutsideStore()
const userOutsideStore = useUserOutsideStore()
const menuOutsideStore = useMenuOutsideStore()
const routeOutsideStore = useRouteOutsideStore()
settingsOutsideStore.app.enableProgress && (isLoading.value = true)
const settingsStore = useSettingsStore()
const userStore = useUserStore()
const menuStore = useMenuStore()
const routeStore = useRouteStore()
settingsStore.app.enableProgress && (isLoading.value = true)
// 是否已登录
if (userOutsideStore.isLogin) {
if (userStore.isLogin) {
// 是否已根据权限动态生成并挂载路由
if (routeOutsideStore.isGenerate) {
if (routeStore.isGenerate) {
// 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
settingsOutsideStore.menu.menuMode !== 'single' && menuOutsideStore.setActived(to.path)
settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path)
if (to.name) {
if (to.matched.length !== 0) {
// 如果已登录状态下，进入登录页会强制跳转到控制台页面
@ -174,11 +174,11 @@ router.beforeEach(async(to, from, next) => {
name: 'dashboard',
replace: true
})
} else if (!settingsOutsideStore.dashboard.enable && to.name == 'dashboard') {
} else if (!settingsStore.dashboard.enable && to.name == 'dashboard') {
// 如果未开启控制台页面，则默认进入侧边栏导航第一个模块
if (menuOutsideStore.sidebarMenus.length > 0) {
if (menuStore.sidebarMenus.length > 0) {
next({
path: menuOutsideStore.sidebarMenusFirstDeepestPath,
path: menuStore.sidebarMenusFirstDeepestPath,
replace: true
})
} else {
@ -197,39 +197,39 @@ router.beforeEach(async(to, from, next) => {
next()
}
} else {
switch (settingsOutsideStore.app.routeBaseOn) {
switch (settingsStore.app.routeBaseOn) {
case 'frontend':
await routeOutsideStore.generateRoutesAtFront(asyncRoutes)
await routeStore.generateRoutesAtFront(asyncRoutes)
break
case 'backend':
await routeOutsideStore.generateRoutesAtBack()
await routeStore.generateRoutesAtBack()
break
case 'filesystem':
await routeOutsideStore.generateRoutesAtFilesystem(asyncRoutes)
switch (settingsOutsideStore.menu.baseOn) {
await routeStore.generateRoutesAtFilesystem(asyncRoutes)
switch (settingsStore.menu.baseOn) {
case 'frontend':
await menuOutsideStore.generateMenusAtFront()
await menuStore.generateMenusAtFront()
break
case 'backend':
await menuOutsideStore.generateMenusAtBack()
await menuStore.generateMenusAtBack()
break
}
break
}
let removeRoutes = []
routeOutsideStore.flatRoutes.forEach(route => {
routeStore.flatRoutes.forEach(route => {
if (!/^(https?:|mailto:|tel:)/.test(route.path)) {
removeRoutes.push(router.addRoute(route))
}
})
if (settingsOutsideStore.app.routeBaseOn === 'filesystem') {
if (settingsStore.app.routeBaseOn === 'filesystem') {
const otherRoutes = generatedRoutes.filter(item => item.meta?.constant !== true && item.meta?.layout === false)
otherRoutes.length && removeRoutes.push(router.addRoute(...otherRoutes))
} else {
removeRoutes.push(router.addRoute(lastRoute))
}
// 记录的 accessRoutes 路由数据，在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
routeOutsideStore.setCurrentRemoveRoutes(removeRoutes)
routeStore.setCurrentRemoveRoutes(removeRoutes)
next({ ...to, replace: true })
}
} else {
@ -247,16 +247,16 @@ router.beforeEach(async(to, from, next) => {
})
router.afterEach((to, from) => {
const settingsOutsideStore = useSettingsOutsideStore()
const keepAliveOutsideStore = useKeepAliveOutsideStore()
settingsOutsideStore.app.enableProgress && (isLoading.value = false)
const settingsStore = useSettingsStore()
const keepAliveStore = useKeepAliveStore()
settingsStore.app.enableProgress && (isLoading.value = false)
// 设置页面 title
to.meta.title && settingsOutsideStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
to.meta.title && settingsStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
// 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
if (to.meta.cache) {
let componentName = to.matched[to.matched.length - 1].components.default.name
if (componentName) {
keepAliveOutsideStore.add(componentName)
keepAliveStore.add(componentName)
} else {
console.warn('该页面组件未设置组件名，会导致缓存失效，请检查')
}
@ -268,18 +268,18 @@ router.afterEach((to, from) => {
switch (typeof from.meta.cache) {
case 'string':
if (from.meta.cache != to.name) {
keepAliveOutsideStore.remove(componentName)
keepAliveStore.remove(componentName)
}
break
case 'object':
if (!from.meta.cache.includes(to.name)) {
keepAliveOutsideStore.remove(componentName)
keepAliveStore.remove(componentName)
}
break
}
// 如果进入的是 reload 页面，则也将离开页面的缓存清空
if (to.name == 'reload') {
keepAliveOutsideStore.remove(componentName)
keepAliveStore.remove(componentName)
}
}
})

5
src/store/index.js
View File

@ -1,2 +1,3 @@
import { createPinia } from 'pinia'
export const piniaStore = createPinia()
const pinia = createPinia()
export default pinia

9
src/store/modules/keepAlive.js
View File

@ -1,7 +1,4 @@
import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
export const useKeepAliveStore = defineStore(
const useKeepAliveStore = defineStore(
// 唯一ID
'keepAlive',
{
@ -36,6 +33,4 @@ export const useKeepAliveStore = defineStore(
}
)
export function useKeepAliveOutsideStore() {
return useKeepAliveStore(piniaStore)
}
export default useKeepAliveStore

14
src/store/modules/menu.js
View File

@ -1,13 +1,11 @@
import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
import { deepClone, resolveRoutePath } from '@/util'
import path from 'path-browserify'
import api from '@/api'
import menu from '@/menu'
import { useSettingsStore } from './settings'
import { useUserStore } from './user'
import { useRouteStore } from './route'
import useSettingsStore from './settings'
import useUserStore from './user'
import useRouteStore from './route'
function getDeepestPath(routes, rootPath = '') {
let retnPath
@ -66,7 +64,7 @@ function filterAsyncMenus(menus, permissions) {
return res
}
export const useMenuStore = defineStore(
const useMenuStore = defineStore(
// 唯一ID
'menu',
{
@ -179,6 +177,4 @@ export const useMenuStore = defineStore(
}
)
export function useMenuOutsideStore() {
return useMenuStore(piniaStore)
}
export default useMenuStore

12
src/store/modules/route.js
View File

@ -1,10 +1,8 @@
import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
import { deepClone, isExternalLink } from '@/util'
import api from '@/api'
import { useSettingsStore } from './settings'
import { useUserStore } from './user'
import useSettingsStore from './settings'
import useUserStore from './user'
function hasPermission(permissions, route) {
let isAuth = false
@ -118,7 +116,7 @@ function flatAsyncRoutes(routes, breadcrumb, baseUrl = '') {
return res
}
export const useRouteStore = defineStore(
const useRouteStore = defineStore(
// 唯一ID
'route',
{
@ -236,6 +234,4 @@ export const useRouteStore = defineStore(
}
)
export function useRouteOutsideStore() {
return useRouteStore(piniaStore)
}
export default useRouteStore

8
src/store/modules/settings.js
View File

@ -1,8 +1,6 @@
import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
import settings from '@/settings'
export const useSettingsStore = defineStore(
const useSettingsStore = defineStore(
// 唯一ID
'settings',
{
@ -53,6 +51,4 @@ export const useSettingsStore = defineStore(
}
)
export function useSettingsOutsideStore() {
return useSettingsStore(piniaStore)
}
export default useSettingsStore

12
src/store/modules/user.js
View File

@ -1,11 +1,9 @@
import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
import api from '@/api'
import { useRouteStore } from './route'
import { useMenuStore } from './menu'
import useRouteStore from './route'
import useMenuStore from './menu'
export const useUserStore = defineStore(
const useUserStore = defineStore(
// 唯一ID
'user',
{
@ -92,6 +90,4 @@ export const useUserStore = defineStore(
}
)
export function useUserOutsideStore() {
return useUserStore(piniaStore)
}
export default useUserStore

12
src/util/index.js
View File

@ -1,6 +1,6 @@
import path from 'path-browserify'
import { useSettingsOutsideStore } from '@/store/modules/settings'
import { useUserOutsideStore } from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import useUserStore from '@/store/modules/user'
export function deepClone(target) {
// 定义一个变量
@ -36,10 +36,10 @@ export function deepClone(target) {
}
function hasPermission(permission) {
const settingsOutsideStore = useSettingsOutsideStore()
const userOutsideStore = useUserOutsideStore()
if (settingsOutsideStore.app.enablePermission) {
return userOutsideStore.permissions.some(v => {
const settingsStore = useSettingsStore()
const userStore = useUserStore()
if (settingsStore.app.enablePermission) {
return userStore.permissions.some(v => {
return v === permission
})
} else {

2
src/views/keep_alive_example/nested/nested.vue
View File

@ -7,7 +7,7 @@
</route>
<script setup name="TabExampleNested1">
import { useKeepAliveStore } from '@/store/modules/keepAlive'
import useKeepAliveStore from '@/store/modules/keepAlive'
const keepAliveStore = useKeepAliveStore()
</script>

2
src/views/keep_alive_example/nested/nested/nested.vue
View File

@ -7,7 +7,7 @@
</route>
<script setup name="TabExampleNested2">
import { useKeepAliveStore } from '@/store/modules/keepAlive'
import useKeepAliveStore from '@/store/modules/keepAlive'
const keepAliveStore = useKeepAliveStore()
</script>

2
src/views/keep_alive_example/page.vue
View File

@ -11,7 +11,7 @@ import { onBeforeRouteLeave } from 'vue-router'
const router = useRouter()
import { useKeepAliveStore } from '@/store/modules/keepAlive'
import useKeepAliveStore from '@/store/modules/keepAlive'
const keepAliveStore = useKeepAliveStore()
const openKeepAlive = ref(false)

4
src/views/login.vue
View File

@ -12,9 +12,9 @@
const { proxy } = getCurrentInstance()
const route = useRoute(), router = useRouter()
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useUserStore } from '@/store/modules/user'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const title = import.meta.env.VITE_APP_TITLE

2
src/views/mock_example/index.vue
View File

@ -7,7 +7,7 @@
</route>
<script setup>
import { useUserStore } from '@/store/modules/user'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
function getPermission() {

4
src/views/permission_example/index.vue
View File

@ -9,9 +9,9 @@
<script setup>
const { proxy } = getCurrentInstance()
import { useSettingsStore } from '@/store/modules/settings'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
import { useUserStore } from '@/store/modules/user'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
function accountChange(val) {

2
src/views/personal/edit.password.vue
View File

@ -10,7 +10,7 @@
const route = useRoute(), router = useRouter()
const { proxy } = getCurrentInstance()
import { useUserStore } from '@/store/modules/user'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const validatePassword = (rule, value, callback) => {

3
vite/plugins/auto-import.js
View File

@ -13,7 +13,8 @@ export default function createAutoImport() {
'defineExpose',
'withDefaults'
]
}
},
'pinia'
],
eslintrc: {
enabled: true,