技術棧：vue3 + vue-Router ^4.0 + pinia 3.0 + pinia-plugin-persist 持久化儲存

場景： vue-router 路由守衛 跳轉前判斷  pinia 狀態 state的token是否存在 ，存在就跳轉，不存在跳轉到 登入頁面。

科普一：pinia-plugin-persist 的使用

import { createPinia } from "pinia"
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export 
 
default store

配置 ：

import { defineStore } from "pinia";
export const useUserStore = defineStore({
  id: "user",
  state: () => {
    return {
      token: ""
    };
  },
  actions: {
    setToken(token: string) {
      this.token = token;
    }
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 
 
"your key",
        storage: localStorage,
      },
    ],
  },
});

支援 localStorage，sessionStorage 。

踩的坑：

當配合 路由使用時，持久化 儲存失效了

import { useUserStore } from '@/stores/user'

{
      path: "/cart",
      name: "Cart",
      component: () =>
          import(/* webpackChunkName: "cart" */ "../views/CartView.vue"),
      beforeEnter:(to, from, next)
 
=>{
        const userStore = useUserStore();
        if( userStore.token ){
          next();
        }else{
          next('/login');
        }
      }

答案：

 userStore 初始化 必須放在  路由守衛裡 才會生效， 必須放在  路由守衛裡 才會生效， 必須放在  路由守衛裡 才會生效。放在外面，持久化會失效，記錄一下。