vue3 引入 pinia+数据持久化储存(pinia-plugin-persistedstate)
1.安装 pinia
yarn add pinia
# 或者使用 npm
npm install pinia
# 或者使用 pnpm
pnpm i pinia --save
- 安装 pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate
# 或者使用 npm
npm : npm i pinia-plugin-persistedstate
# 或者使用 pnpm
pnpm i pinia-plugin-persistedstate -S
3、在main.ts中引入
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)
const app = createApp(App)
app.use(pinia)
app.mount('#app')
4、定义一个store(/store/index.ts文件中)
import { defineStore } from "pinia";
export const useUserStore = defineStore('user', {
state: () => {
return {
user: {},
}
},
actions: {
setUser(data: object) {
this.user = data
}
},
persist: true, //开启缓存
})
- 测试数据持久化
成功!