546 | 姓名:{{ name }}
547 | 年龄:{{ age }}
548 | 计算的名字:{{ userStore.fullName }}
549 | app的config: {{ appStore.config }}
550 |
551 |
552 |
553 |
554 | ```
555 |
556 | ### 数据持久化
557 |
558 | - 文档:https://github.com/prazdevs/pinia-plugin-persistedstate
559 |
560 | * 插件 pinia-plugin-persistedstate 可以辅助实现数据持久化功能。
561 | * 数据默认存在 sessionStorage 里,并且会以 store 的 id 作为 key。
562 |
563 | * 安装依赖
564 |
565 | ```ts
566 | pnpm i pinia-plugin-persistedstate
567 | ```
568 |
569 | - 引用插件
570 |
571 | ```ts
572 | // src/store/index.ts
573 |
574 | import { createPinia } from 'pinia'
575 | import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
576 | const store = createPinia()
577 | store.use(piniaPluginPersistedstate)
578 | export default store
579 | ```
580 |
581 | - 在对应的 store 里开启 persist 即可
582 |
583 | ```ts
584 | export const useUserStore = defineStore({
585 | id: 'user',
586 |
587 | state: () => {
588 | return {
589 | name: '张三'
590 | }
591 | },
592 |
593 | // 开启数据缓存
594 | persist: {
595 | key: 'user',
596 | storage: sessionStorage, // 数据存储位置,默认为 localStorage
597 | paths: ['name'], // 用于部分持久化状态的点表示法路径数组,表示不会持久化任何状态(默认为并保留整个状态)
598 | overwrite: true
599 | }
600 | })
601 | ```
602 |
603 | ##