pinia在登录页面持久化存储

• 安装pinia npm install pinia
• 创建一个store/index.js

import { createPinia } from 'pinia'
//从pinia模块导入createPinia函数。Pinia是Vue.js的一个状态管理库，createPinia函数用于创建一个新的Pinia实例
import piniaPluginPersist from 'pinia-plugin-persist'
//pinia-plugin-persist是一个Pinia的插件，用于持久化store的状态。

const store = createPinia()
//使用createPinia函数创建一个新的Pinia实例，并将其赋值给store变量

store.use(piniaPluginPersist)
//在创建的Pinia实例上使用piniaPluginPersist插件。这意味着Pinia store的状态将被持久化，即使在页面刷新后，状态也会被保留。

export default store
//导出store变量。这样，其他模块就可以导入并使用这个store了

• 在main.js中

import store from "./store";
createApp(App).use(store).mount("#app");

• store/user.js中

import { defineStore } from "pinia";
export const useUserStore = defineStore({
  id: "user",
  //id,模块名称
  state: () => {
    return {
      token: "",
    };
  },
  actions: {
    setToken(token) {
      this.token = token;
    },
  },
  // 开启数据缓存
  persist: {
    enabled: true,
    //表示开启持久化保存
    strategies: [
      {
        key: "user",
        storage: localStorage,
        //paths: ['token']
      },
    ],
  },
});

• 在vue中使用的时候

//pinia
import { useUserStore } from "../store/user";
const userStore = useUserStore();
//在需要存储的地方
userStore.setToken(res.data.accessToken);