vue3+ts-pinia持久化储存

npm i pinia-plugin-persistedstate

在main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
//引入持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
createApp(App).use(router).use(pinia).mount('#app')

pinia分模块化 ----store/index.ts

import useUserStore from './modules/user'
import useCartStore from './modules/cart'
import useCategoryStore from './modules/category'

const useStore = () => ({
	userStore: useUserStore(),
	cartStore: useCartStore(),
	categoryStore: useCategoryStore(),
})

export default useStore

在store文件夹里的 user.ts使用，哪个模块需要持久化储存就在哪个模块加persist

import { defineStore } from 'pinia'

const useUserStore = defineStore({
	// persist: true, 第一种方式
	persist: {
		key: 'userStore',  //指定存储的名字
		storage: sessionStorage, // 保存的位置 localstorage
	},
	id: 'user',
	state: () => ({
		name: 'li',
		age: 18,
	}),
	actions: {},
	getters: {},
})

export default useUserStore