【精品】pinia 基于插件pinia-plugin-persist的持久化

准备工作第一步：安装pinia
npmpinia --save
第二步：新建store目录,创建index.ts
import { createPinia } from "pinia"const store = createPinia()export default store
第三步：main.ts中使用store
import { createApp } from 'vue'import store from '@/store'const app = createApp(App)app.use(store)app.mount('#app')
第四步：新建user.ts
import { defineStore } from "pinia"export const useUserStore = defineStore({id:'user',state() {return {name: '',age: 0}}})

文章插图
第五步：在vue页面中使用

User：{{ name }} == {{ age }}
setup lang="ts">import {useUserStore} from "@/store/module/user"import {storeToRefs} from "pinia"const userStore = useUserStore()const {name, age} = storeToRefs(userStore)const fun = () => {userStore.name = "zhangsan"userStore.age = 18}

结果
打开页面，单击页面按钮，显示的用户信息发生变化，刷新页面又恢复到原来的样子。
利用插件pinia--持久化第一步：安装插件pinia--
npmpinia-- --save
第二步：修改store文件夹下的index.ts

import { createPinia } from "pinia"import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia()store.use(piniaPluginPersist)export default store

第三步：修改user.ts，为其添加

import {defineStore} from "pinia"export const useUserStore = defineStore({id: "user",state: () => {return {name: '',age: 0}},persist: {enabled: true,strategies: [{key: 'wego_user',storage: localStorage}]}})

【【精品】pinia 基于插件pinia-plugin-persist的持久化】注：在中可以指定对哪些数据进行缓存，比如：
strategies: [{ storage: localStorage, paths: ['token','name'] }]
测试
运行程序，打开页面单击按钮，数据发生变化，关闭页面再次打开，页面显示的仍然是变化后的数据，此时F12，会看到：

【精品】pinia 基于插件pinia-plugin-persist的 持久化

【精品】pinia 基于插件pinia-plugin-persist的持久化