Pinia+持久化插件

使用步骤：

1、安装pinia    npm install pinia

2、在vue应用实例使用pinia

import './assets/main.css'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入路由
import router from '@/router'


import App from './App.vue'

//pinia
import {createPinia} from 'pinia'

const app = createApp(App);

//创建使用
const pinia = createPinia();
app.use(pinia)


app.use(router)
app.use(ElementPlus);
app.mount('#app')

3、创建store文件夹，创建token.js文件（我是用来拿token，名字无所谓）

//定义store
import {defineStore} from 'pinia'
import {ref} from 'vue'
/*
第一个参数，名字，唯一性
第二个参数：函数
*/

export const useTokenStore = defineStore('token',()=>{
    //定义状态的内容
    //1、响应式变量
    const token = ref('')
    //2、设置值的函数
    const setToken = (newToken)=>{
        token.value = newToken
    }
    //3、清空
    const removeToken = ()=>{
        token.value=''
    }

    return{
        token,setToken,removeToken
    }
});

4、在组件中运用

//登录页面vue

import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();

//随便举例，具体使用具体用法
const login = async()=>{
    let result = await doLogin(value);
    //调用方法存储返回的token值
    tokenStore.setToken(result.data)
}


//登录成功后的其他vue，或者需要发送token的其他js文件等等

//导入
import { useTokenStore } from '@/stores/token'
const tokenStore = useTokenStore();
//需要用到token值，直接拿即可,根据情况而定，拿不到加上.value
let token = tokenStore.token

5、持久化插件persist

安装npm install pinia-persistedstate-plugin

main.js调整

import {createPersistedState} from'pinia-persistedstate-plugin'
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)

app.use(pinia)

在定义的状态添加持久化token.js

export const useTokenStore = defineStore('token',()=>{
    //1.定义描述token
    const token = ref('')

    //2.定义修改token的方法
    const setToken = (newToken)=>{
        token.value = newToken
    }

    //3.定义移除token的方法
    const removeToken = ()=>{
        token.value=''
    }
    return {
        token,setToken,removeToken
    }
},
{
    persist:true//参数持久化
}
)