介绍：Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态

安装：

npm install pinia   

配置：

配置Piain:

main.js：

//Pinia-状态管理库
import {createPinia} from 'pinia'
​
const pinia = createPinia()
​
app.use(pinia)

定义仓库：

src/store/token.js

import { defineStore } from 'pinia'
​
export const useTokenStore = defineStore('token', {
    state: () => ({
        token: localStorage.getItem('chang-token') || ''
    }),
    getters: {
        getToken: (state) => state.token,
        isLogin: (state) => !!state.token
    },
    actions: {
        setToken(token) {
            this.token = token
            localStorage.setItem('chang-token', token) // ✅ 同步到本地存储
        },
        removeToken() {
            this.token = ''
            localStorage.removeItem('chang-token') // ✅ 清除本地存储
        }
    }
})

使用：

import {useTokenStore} from "@/stores/token.js";
​
const tokenStore = useTokenStore();
​
eg:
tokenStore.setToken(res.data.token);
config.headers['token'] = tokenStore.token;

Persist-Pinia持久化插件:

介绍：Pinia默认存储在内存，当浏览器刷新时会丢失数据，Persist插件可以将pinia中的数据持久化储存

安装：

npm install pinia-persistedstate-plugin

配置：

配置Persist:

main.js：

//Persist-Pinia持久化插件
import {createPersistedState} from "pinia-persistedstate-plugin";
​
const persist = createPersistedState();
​
pinia.use(persist)

定义仓库：

src/store/token.js：

import { defineStore } from 'pinia'
import { ref } from "vue";
​
export const useTokenStore = defineStore('token', ()=>{
    //定义状态内容
​
    //1.响应式变量
    const token = ref('')
​
    //2.定义一个函数，修改token的值
    const setToken = (newToken) => {
        token.value = newToken
    }
​
    //3.函数，移除token的值
    const removeToken = () => {
        token.value = ''
    }
​
    return {
        token,setToken,removeToken,
    }
},{
    persist:true //持久化存储
})

使用：

import {useTokenStore} from "@/stores/token.js";
​
const tokenStore = useTokenStore();
​
eg:
tokenStore.setToken(res.data.token);
config.headers['token'] = tokenStore.token;