1.下载依赖
pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate
2.在main.ts引入
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 数据持久化--pinia中使用到
import persist from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'
import 'virtual:svg-icons-register'
// 样式全局使用【vant样式】
import 'vant/lib/index.css'
// 初始化样式
import '@/styles/main.scss'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
pinia.use(persist)
app.use(router)
app.mount('#app')
3.使用pinia
import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { User } from '@/types/user'
export const useUserStore = defineStore(
'cp-user',
() => {
// 用户信息
const user = ref<User>()
// 保存用户信息
const setUser = (u: User) => {
user.value = u
}
// 删除用户信息
const delUser = () => {
user.value = undefined
}
return { user, setUser, delUser }
},
// 数据持久化 -- 单独下载依赖包后在main.ts配置后可以直接使用
// 开启数据持久化
{ persist: true }
)
