feat: 引入 pinia-plugin-persistedstate 实现状态持久化

README.md

@@ -44,11 +44,12 @@ business-center-vite            (主仓库 business-center-vite)
 ### 核心依赖
 
 | 依赖                        |  版本  |                             链接                             | 说明                                                         |
-| ------------ | :----: | :----------------------------------------------------------: | ------------------------------------------------------------ |
+| --------------------------- | :----: | :----------------------------------------------------------: | ------------------------------------------------------------ |
 | vue                         | 3.5.x  | [官网](https://cn.vuejs.org/) [npm](https://www.npmjs.com/package/vue) [GitHub](https://github.com/vuejs/vue) | JavaScript 框架                                              |
 | vite                        | 6.0.x  | [官网](https://cn.vite.dev/) [npm](https://www.npmjs.com/package/vite) [GitHub](https://github.com/vitejs/vite) | 前端工具链                                                   |
 | element-plus                | 2.9.x  | [官网](https://element-plus.org/zh-CN/) [npm](https://www.npmjs.com/package/element-plus) [GitHub](https://github.com/element-plus/element-plus) | UI 组件库（使用[手动导入](https://element-plus.org/zh-CN/guide/quickstart.html#%E6%89%8B%E5%8A%A8%E5%AF%BC%E5%85%A5)方式） |
 | pinia                       | 2.3.x  | [官网](https://pinia.vuejs.org/) [npm](https://www.npmjs.com/package/pinia) [GitHub](https://github.com/vuejs/pinia) | 全局状态管理                                                 |
+| pinia-plugin-persistedstate | 4.2.x  | [官网](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/) [npm](https://www.npmjs.com/package/pinia-plugin-persistedstate) [GitHub](https://github.com/prazdevs/pinia-plugin-persistedstate) | Pinia 存储持久化插件                                         |
 | vue-router                  | 4.5.x  | [官网](https://router.vuejs.org/) [npm](https://www.npmjs.com/package/vue-router) [GitHub](https://github.com/vuejs/router) | 路由管理                                                     |
 | vue-i18n                    | 11.1.x | [官网](https://vue-i18n.intlify.dev/) [npm](https://www.npmjs.com/package/vue-i18n) [GitHub](https://github.com/intlify/vue-i18n) | i18n 国际化                                                  |
 

frontend/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "element-plus": "^2.9.5",
     "pinia": "^2.3.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
     "unplugin-element-plus": "^0.9.1",
     "vue": "^3.5.13",
     "vue-i18n": "^11.1.1",

frontend/src/App.vue

@@ -4,14 +4,13 @@ import { ref } from 'vue'
 import { ElConfigProvider } from 'element-plus'
 import { useThemeConfigStore } from './stores/themeConfig';
 
-const themeConfig = useThemeConfigStore()
-
-// refer: https://element-plus.org/zh-CN/component/config-provider.html
-const zIndex = ref<number>(3000)
+const themeConfigStore = useThemeConfigStore()
 </script>
 
 <template>
-  <el-config-provider :size="themeConfig.elSize" :z-index="zIndex" :button="{ autoInsertSpace: true }" :locale="locale">
+  {{ themeConfigStore.elConfig.size }}
+  <el-config-provider :size="themeConfigStore.elConfig.size" :z-index="themeConfigStore.elConfig.zIndex"
+    :button="{ autoInsertSpace: true }" :locale="locale">
     <MainView />
   </el-config-provider>
 </template>

frontend/src/assets/main.css

@@ -1,12 +1,5 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
 a,
 .green {
   text-decoration: none;
@@ -22,14 +15,4 @@ a,
 }
 
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
 }

frontend/src/main.ts

@@ -3,6 +3,7 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import App from './App.vue'
 import router from './router'
@@ -17,6 +18,7 @@ app.use(i18n)
 
 // 导入 pinia 模块
 const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate) // 注册 pinia-plugin-persistedstate 插件
 app.use(pinia)
 
 // 导入 router 模块

frontend/src/stores/themeConfig.ts

@@ -2,8 +2,24 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useThemeConfigStore = defineStore('themeConfig', () => {
+  // refer: https://element-plus.org/zh-CN/component/config-provider.html
+  const elConfig = ref<{
     // 全局组件大小
-  const elSize = ref<"" | "small" | "default" | "large">('small')
+    size: "" | "small" | "default" | "large";
+    // 全局初始化 zIndex 的值
+    zIndex?: number;
+  }>({
+    size: 'small',
+    zIndex: 3000,
+  })
 
-  return { elSize }
+  return {
+    elConfig,
+  }
+}, {
+  // 启用持久化
+  // persist: true,
+  persist: {
+    // key: 'themeConfig',
+  },
 })

frontend/src/views/MainView.vue

@@ -3,8 +3,9 @@
 
   <header>
     <div class="wrapper">
-
-      <ElButton>哈哈哈</ElButton>
+      <ElButton @click="() => themeConfigStore.elConfig.size = 'small'">哈哈哈</ElButton>
+      <ElButton @click="() => themeConfigStore.elConfig.size = 'default'">哈哈哈</ElButton>
+      <ElButton @click="() => themeConfigStore.elConfig.size = 'large'">哈哈哈</ElButton>
       <nav>
         <!-- <RouterLink to="/">Home</RouterLink> -->
         <!-- <RouterLink to="/about">About</RouterLink> -->
@@ -14,6 +15,9 @@
 </template>
 
 <script setup lang="ts">
+import { useThemeConfigStore } from '@/stores/themeConfig';
 import { ElButton } from 'element-plus';
 import { RouterLink, RouterView } from 'vue-router'
+
+const themeConfigStore = useThemeConfigStore()
 </script>