封装pinia
构建用户仓库 和 持久化
通过持久化,可以实现应用程序重新启动时恢复这些状态
官方文档:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
- 安装插件 pinia-plugin-persistedstate
pnpm add pinia-plugin-persistedstate -D
- 使用 main.js(之后统一管理,这部分不用操作)
import persist from 'pinia-plugin-persistedstate' ... app.use(createPinia().use(persist)) //到这里是配置好持久化
- 配置 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
配置好后创建流程:
- stores/modules新建文件编写类似于user.js内容;
- 在stores/index中
export * from './modules/test' //这根据具体模块