1.我使用的是pnpm,下载pinia-plugin-persistedstate依赖
pnpm add pinia-plugin-persistedstate -D
2.在main.js文件中配置
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate' // 导入
import App from './App.vue'
import router from './router'
import './assets/main.scss'
const app = createApp(App)
app.use(createPinia().use(persist)) // 使用
app.use(router)
app.mount('#app')
3.在自定义的store中使用
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useUserStore = defineStore(
'big-user',
() => {
const token = ref('')
const setToken = (newToken) => {
token.value = newToken
}
const removeToken = () => {
token.value = ''
}
return {
token,
setToken,
removeToken
}
},
{ persist: true } // 在 defineStore() 的第三个参数中设置
)