封装pinia并引入pinia持久化工具(pinia-plugin-persistedstate)

安装

 pnpm add pinia pinia-plugin-persistedstate 

配置

src下建立store文件夹并且创建index.ts文件 结构如下

store/index.ts

import type { App } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const store = createPinia()
store.use(piniaPluginPersistedstate)export const setupStore = (app: App<Element>) => {app.use(store)
}export { store }

store/modules/app.ts

import { store } from '../index.ts'
import { defineStore } from 'pinia'interface AppState {num: numberisOpen: boolean
}export const useAppStore = defineStore('app', {state: (): AppState => {return {num: 1,isOpen: false}},getters: {getNum(): number {return this.num}},actions: {setNum(num: number) {this.num = num},setIsOpen(isOpen: boolean) {this.isOpen = isOpen}},persist: true
})export const useAppStoreWithOut = () => {return useAppStore(store)
}

main.ts

在main.ts中进行pinia的挂载
import { setupStore } from ‘./store/index.ts’
setupStore(app)

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入状态管理
import { setupStore } from './store/index.ts'
// 路由
import router, { setupRouter } from './router'
const setupAll = async () => {const app = createApp(App)setupRouter(app)setupStore(app)await router.isReady()app.mount('#app')
}setupAll()

使用

<template><div style="height: 100%"><div> HomeView </div><div>{{ appStore.num }}</div><button @click="handleDemo(1)">测试</button></div>
</template><script setup lang="ts">
import { useAppStoreWithOut } from '../store/modules/app.ts'
defineOptions({ name: 'HomeView' })
const appStore = useAppStoreWithOut()
const handleDemo = (value: number) => {appStore.setNum(appStore.num + value)console.log('appStore.num', appStore.num)
}
</script><style lang="scss" scoped></style>

持久化存储截图

关于持久化

官网

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/config.html

基本配置

{persist: {key: 'user', // 存储的键名，默认为 store 的 idstorage: localStorage, // 存储位置，默认为 localStoragepaths: ['token', 'userInfo'], // 指定要持久化的状态，默认全部serializer: { // 序列化配置serialize: JSON.stringify,deserialize: JSON.parse}}
}

自定义存储键名

{persist: {key: 'my-app-user' // 自定义存储键名}
}

部分状态持久化

{persist: {paths: ['token'] // 只持久化 token}
}

使用 sessionStorage

{persist: {storage: sessionStorage // 使用 sessionStorage 替代 localStorage}
}

自定义序列化（如加密）

import { encrypt, decrypt } from '@/utils/crypto'{persist: {serializer: {serialize: (value) => encrypt(JSON.stringify(value)),deserialize: (value) => JSON.parse(decrypt(value))}}
}

多存储方式组合

{persist: [{key: 'user-info',paths: ['userInfo'],storage: localStorage},{key: 'user-token',paths: ['token'],storage: sessionStorage}]
}

部分内容来源 Pinia 及其持久化插件的完整使用指南