【vue3】使用pinia替代vuex

本文介绍了如何使用pinia替代vuex进行前端状态管理。pinia提供了完整的typescript支持,轻量级且易用。文章详细阐述了pinia的安装、特点,以及如何初始化store、引用store、创建并修改数据、实现store间的相互引用,还特别讨论了在devtools中的表现。此外,还介绍了如何实现数据持久化,包括安装插件、启用持久化以及自定义持久化字段,确保数据在页面刷新时不丢失。
摘要由CSDN通过智能技术生成

💡 pinia是vue团队推荐代替vuex的一款轻量级状态管理库。

1. 安装

npm i pinia --save

2. pinia特点

  1. 完整的typescript支持
  2. 足够轻量,压缩后的体积只有1.6kb
  3. 去除mutations,只保留state,getters,actions
  4. actions同时支持同步和异步
  5. 没有modules模块的概念,只有store,store之间可以互相引用,更好的代码分割

3. 使用

1.初始化store

创建目录store/index.ts

import {
    createPinia } from 'pinia'

const store = createPinia()

export default store

2.在main.ts引用store

import {
    createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)

app.use(store)
app.mount('#app')

3.创建store

根据功能模块在store下创建ts文件,维护各个功能的数据,如用户模块user.ts,维护两个字段:userInfo和token,通过actions里面的方法修改userInfo和token的内容

import {
    defineStore } from 'pinia'

interface UserInfo {
   
  name?: string
  age?: number
}

// 第一个参数是id,id必填,且需要保证值唯一
export const useUserStore = defineStore('user', {
   
  state: (): {
   
    userInfo: UserInfo
    token: string
  } => {
   
    return {
   
      userInfo: {
   }
  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值