本文将介绍以下内容:

• pinia 数据持久化
• 基于router 使用 Pinia 异常 "getActivePinia()" 的第二种解决方案
• element-plus 页面布局
• element-plus 自动导入
• 修改样式，布局页填充整个浏览器

pinia 数据持久化

上篇遗留下的问题(页面刷新pinia数据直接丢失)，本节一起解决该问题。

在Pinia中实现数据持久化，可以使用
pinia-plugin-persistedstate插件。该插件可以帮助你将Pinia的状态数据自动保存到浏览器的本地存储（例如localStorage或sessionStorage），以便在页面刷新或重新加载后恢复数据。

• 安装 inia-plugin-persistedstate 依赖项。

npm install pinia-plugin-persistedstate

• 程序的入口文件（通常是main.js）中，按照以下方式使用pinia-plugin-persistedstate插件：

// store/index.ts

import { createPinia } from 'pinia';

import { createPersistedState } from 'pinia-plugin-persistedstate';

export const pinia = createPinia().use(createPersistedState());

// main.ts

import { createApp } from 'vue'
import App from './App.vue'

import router from '../router';

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import { pinia } from './store/index';

createApp(App)
    .use(ElementPlus)
    .use(router)
    .use(pinia)
    .mount('#app')

上述示例中，按照之前提到的方式创建了Pinia实例pinia，并使用pinia.use()方法将createPersistedState()插件添加到Pinia实例中，以实现数据持久化。

createPinia().use(createPersistedState());

基于Router 使用 Pinia 异常 "getActivePinia()" 的第二种解决方案

上篇中说到了，在router 中使用 pinia store 抛出异常 pinia.mjs:1699 Uncaught Error: []: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

也给出了相应的解决方法，本次给出第二种方式更简单。

import { useAuthStore } from '@/store/auth';

router.beforeEach((to, from, next) => {
    // 获取Pinia store的实例
    const userStore = useAuthStore();
});

export default router;

直接在 router.beforeEach 中获取 Pinia 的实例。这样就避免了 异常 pinia.mjs:1699 Uncaught Error: []: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

完整示例

import { createRouter, createWebHistory } from "vue-router";
import HomePage from '@/views/Home.vue';
import LoginPage from '@/views/Login.vue';
import defaultLayout from '@/layout/Default.vue';
import { useAuthStore } from '@/store/auth';

const routes = [ ];
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
});

const whiterList = ['/login'];

router.beforeEach((to, from, next) => {
    // 获取Pinia store的实例
    const userStore = useAuthStore();

    console.log('router.beforeEach: begin ');
    console.log('to:', to);
    console.log('from:', from);
    console.log('userStore.isAuth:', userStore.isAuth);
    console.log('router.beforeEach: end ');

    if (whiterList.indexOf(to.path) !== -1) {
        next();
        return;
    }

    // 判断是否需要进行登录验证
    if (!userStore.isAuth) {
        next('/login');
        return;
    }
    // 如果不需要登录验证或用户已登录，则继续路由跳转
    next();

});

export default router;

element-plus 页面布局

在项目 src 文件夹下新建一个 Layout 文件夹和新建Default.vue 布局页。

打开 element-plus 官方文档，找到 Container 布局容器，找到自己合适的布局，复制代码，

找到对应的样式

<script setup lang="ts">

</script>

element-plus 自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后修改 Vite 的配置文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve:{
    alias:{
      '@':'/src'
    }
  }
})

修改样式，布局页填充整个浏览器

<script setup lang="ts">

</script>

  
  
  
  



  

  <script type="module" src="/src/main.ts"></script>