Pinia-构建用户仓库和持久化插件

文章目录


一、pinia是什么?

Pina 是一个用于 Vue.js 的插件,它提供了一个简单的方法来管理和共享 Vuex 或 Pinia(Vuex 的下一代状态管理库)中的 store。虽然 Vuex 仍然是 Vue.js 状态管理的一个流行选择,但 Pinia 提供了一个更轻量级、模块化和类型安全的替代方案。

二、安装 Pinia

首先,你需要安装 Pinia。你可以使用 npm 或 yarn 来安装它:

c 复制代码
pnpm install pinia
# 或者
yarn add pinia

另外我们还要安装一个pinia的持久化插件

c 复制代码
pnpm add pinia-plugin-persistedstate -D

1.拆分模块文件夹

这样是为了以后方便维护

2.配置store信息

这里只是一个小模块,我们还要注册到主文件index.ts中做统一管理

c 复制代码
import { defineStore } from 'pinia'
import { ref } from 'vue'

export interface UserInfo {
  id: number
  username: string
  password: string
  email: string
  phone: string
  avatar: string
  createTime: string
  updateTime: string
}
export const userStore = defineStore('user', () => {
  // 定义数据
  const userInfo = ref<UserInfo>()
  const token = ref<string>('')

  // 定义方法
  const setToken = (val: string) => {
    token.value = val
  }

  // 导出
  return {
    userInfo,
    token,
    setToken,
  }
})

3.主入口文件的统一导出

c 复制代码
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出,给 main.ts 使用
export default pinia

// 模块统一导出
export * from './modules/member'
export * from './modules/user'

三、main.ts中注册

总结

Pinia 提供了比 Vuex 更简洁的 API,并且与 Vue 3 的 Composition API 更加契合。这使得在 Vue 3 应用中使用 Pinia 管理状态变得更加简单和直观。

相关推荐
非凡ghost4 小时前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端
摇滚侠4 小时前
Spring Boot3零基础教程,云服务停机不收费,笔记71
java·spring boot·笔记
丰锋ff4 小时前
英一2013年真题学习笔记
笔记·学习
j七七4 小时前
5分钟搭微信自动回复机器人5分钟搭微信自动回复机器人
运维·服务器·开发语言·前端·python·微信
快起来别睡了4 小时前
TypeScript装饰器详解:像搭积木一样给代码加功能
前端·typescript
Sheldon一蓑烟雨任平生4 小时前
Vue3 组件 v-model
vue.js·vue3·v-model·definemodel·v-model修饰符·自定义双向绑定组件·多个v-model绑定
摇滚侠4 小时前
Spring Boot3零基础教程,监听 Kafka 消息,笔记78
spring boot·笔记·kafka
OpenTiny社区5 小时前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js
ttyyttemo5 小时前
加载图片,不同数据源,Compose实现
前端
胖虎2655 小时前
打造梦幻粒子动画效果:基于 Vue 的 Canvas 实现方案
vue.js