第二节：封装pinia和持久化

封装pinia

构建用户仓库 和 持久化

通过持久化，可以实现应用程序重新启动时恢复这些状态

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1. 安装插件 pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate -D

2. 使用 main.js（之后统一管理，这部分不用操作）

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))
//到这里是配置好持久化

3. 配置 stores/user.js（之后编写的接口如这里所示）

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 用户模块
export const useUserStore = defineStore(
  'big-user',
  () => {
    const token = ref('') // 定义 token
    const setToken = (t) => (token.value = t) // 设置 token

    return { token, setToken }
  },
  {
    persist: true // 持久化
  }
)
//这里引入持久化 persist: true // 持久化

Pinia - 配置仓库统一管理

pinia 独立维护

- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

仓库 统一导出

- 现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致

- 优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

//  sotre/index.js
import { createPinia } from 'pinia' 
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia
export * from './modules/test'  //这根据具体模块

import pinia from '@/stores'    //main.ts
app.use(pinia)

将main.ts种所有和pinia相关的代码移动至stores/index.ts

仓库统一 stores/modules

配置好后创建流程：

1. stores/modules新建文件编写类似于user.js内容；
2. 在stores/index中export * from './modules/test' //这根据具体模块