【vue3】使用pinia替代vuex

sqwu

已于 2022-04-26 17:06:55 修改

阅读量3k

点赞数 2

分类专栏： vue 文章标签：前端

于 2022-04-18 18:01:15 首次发布

本文链接：https://blog.csdn.net/qq_42345108/article/details/124255663

版权

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

摘要由CSDN通过智能技术生成

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

1. 安装

npm i pinia --save

2. pinia特点

完整的typescript支持
足够轻量，压缩后的体积只有1.6kb
去除mutations，只保留state，getters，actions
actions同时支持同步和异步
没有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: {
   }