优化pinia持久化

2026-01-15 09:51:59 +08:00
parent bb1ed16d8b
commit ab737f8a75
9 changed files with 239 additions and 155 deletions
@@ -1,57 +1,67 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'

-export const useLayoutStore = defineStore('layout', () => {
-	// 布局模式：'sidebar', 'top-nav', 'sidebar-top', 'classic'
-	const layoutMode = ref('sidebar')
+export const useLayoutStore = defineStore(
+	'layout',
+	() => {
+		// 布局模式：'sidebar', 'top-nav', 'sidebar-top', 'classic'
+		const layoutMode = ref('sidebar')

-	// 侧边栏折叠状态
-	const sidebarCollapsed = ref(false)
+		// 侧边栏折叠状态
+		const sidebarCollapsed = ref(false)

-	// 视图标签页（用于记录页面滚动位置）
-	const viewTags = ref([])
+		// 视图标签页（用于记录页面滚动位置）
+		const viewTags = ref([])

-	// 切换侧边栏折叠
-	const toggleSidebar = () => {
-		sidebarCollapsed.value = !sidebarCollapsed.value
-	}
+		// 切换侧边栏折叠
+		const toggleSidebar = () => {
+			sidebarCollapsed.value = !sidebarCollapsed.value
+		}

-	// 设置布局模式
-	const setLayoutMode = (mode) => {
-		layoutMode.value = mode
-	}
+		// 设置布局模式
+		const setLayoutMode = (mode) => {
+			layoutMode.value = mode
+		}

-	// 更新视图标签
-	const updateViewTags = (tag) => {
-		const index = viewTags.value.findIndex((item) => item.fullPath === tag.fullPath)
-		if (index !== -1) {
-			viewTags.value[index] = tag
-		} else {
-			viewTags.value.push(tag)
+		// 更新视图标签
+		const updateViewTags = (tag) => {
+			const index = viewTags.value.findIndex((item) => item.fullPath === tag.fullPath)
+			if (index !== -1) {
+				viewTags.value[index] = tag
+			} else {
+				viewTags.value.push(tag)
+			}
+		}
+
+		// 移除视图标签
+		const removeViewTags = (fullPath) => {
+			const index = viewTags.value.findIndex((item) => item.fullPath === fullPath)
+			if (index !== -1) {
+				viewTags.value.splice(index, 1)
+			}
+		}
+
+		// 清空视图标签
+		const clearViewTags = () => {
+			viewTags.value = []
+		}
+
+		return {
+			layoutMode,
+			sidebarCollapsed,
+			viewTags,
+			toggleSidebar,
+			setLayoutMode,
+			updateViewTags,
+			removeViewTags,
+			clearViewTags,
+		}
+	},
+	{
+		persist: {
+			key: 'layout-store',
+			storage: localStorage,
+			pick: ['layoutMode', 'sidebarCollapsed']
 		}
 	}
-
-	// 移除视图标签
-	const removeViewTags = (fullPath) => {
-		const index = viewTags.value.findIndex((item) => item.fullPath === fullPath)
-		if (index !== -1) {
-			viewTags.value.splice(index, 1)
-		}
-	}
-
-	// 清空视图标签
-	const clearViewTags = () => {
-		viewTags.value = []
-	}
-
-	return {
-		layoutMode,
-		sidebarCollapsed,
-		viewTags,
-		toggleSidebar,
-		setLayoutMode,
-		updateViewTags,
-		removeViewTags,
-		clearViewTags,
-	}
-})
+)