vue3新一代状态管理器 — pinia的学习与使用

news2025/7/12 9:36:33

目录

  • 一、vuex与pinia
    • 特性
  • 二、使用pinia
    • 2.1 安装pinia
    • 2.2 项目引入
    • 2.3 创建store
    • 2.4 使用store
      • getter
      • action
    • 2.5 修改state
      • 1、直接修改
      • 2、使用$patch
      • 3、使用actions
    • 2.6 storeToRefs

一、vuex与pinia

在这里插入图片描述

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子,结合了 Vuex 5 核心团队讨论中的许多想法。最终,我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容,并决定实现它 取而代之的是新的建议。

可以理解为pinia就是下一代的vuex5,但是vuex团队为了尊重pinia作者对于vuex的开发贡献,就直接使用pinia命名了。
pinia中文文档

特性

  1. 完全支持typescript
  2. 足够轻量,压缩后体积只有1.6kb
  3. 模块化的设计,在打包时引入的每一个store都可以自动拆分
  4. 没有模块嵌套,只有store概念,store之间可以自由使用,实现更好的代码分隔
  5. actions支持同步和异步,去除了mutation
  6. 支持VueDevtools

二、使用pinia

2.1 安装pinia

用你最喜欢的包管理器安装 pinia:

yarn add pinia
# 或者使用 npm
npm install pinia

2.2 项目引入

使用createPinia将pinia引入项目中。

main.ts:

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

2.3 创建store

src目录下创建store文件夹,用于存放store对应的js/ts文件,未来方便管理,我们可以在一个js/ts文件中只定义一个store,例如我们定义一个user.ts文件,用于存储用户相关的信息和操作:
在这里插入图片描述
pinia使用defineStore创建store,包含了id、state、getters和actions:

// @ts-check
import { defineStore } from 'pinia'

/**
 * Simulate a login
 */
function apiLogin(a: string, p: string) {
  if (a === 'ed' && p === 'ed') return Promise.resolve({ isAdmin: true })
  if (p === 'ed') return Promise.resolve({ isAdmin: false })
  return Promise.reject(new Error('invalid credentials'))
}

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    name: 'Eduardo',
    isAdmin: true,
  }),
  
  getters:{
	userName: (state) => `Get userName from getter ${state.name}`
  },
  
  actions: {
  /**
  * 退出logout
  */
    logout() {
      this.$patch({
        name: '',
        isAdmin: false,
      })
  /**
   * 登录 login
   */
    async login(user: string, password: string) {
      const userData = await apiLogin(user, password)
      this.$patch({
        name: user,
        ...userData,
      })
    },
  },
})

相比较于vuex,pinia去除了mutation,同步和异步操作都通过actions,并且没有了module的概念,defineStore会创建一个新的store。

2.4 使用store

在组件中引入定义好的store并调用:

<script setup lang="ts">
import { useUserStore } from "./store/user"

const userStore = useUserStore()

//访问state
console.log(userStore.name)
//访问getter
console.log(userStore.userName)
</script>

然后就可以通过user来访问store中的state,并且还可以调用getter和action。

getter

Getter 完全等同于 Store 状态的计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用,可以直接在 store 实例上访问 getter。
我们也可以在定义常规函数时通过 this 访问到整个 store 的实例。

action

Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义,并且它们非常适合定义业务逻辑,也可以直接在store实例上调用action。
在actions中也可以在定义常规函数时通过 this 访问到整个 store 的实例。

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

2.5 修改state

1、直接修改

虽然可以通过pinia实例直接修改,但是出于代码结构来说,全局的状态管理还是不要直接在各个组件处随意修改状态,应放于 action 中统一方法修改(piain没有mutation)并不推荐!

store.count ++;

2、使用$patch

使用$patch改变数据 $patch 可以同时修改多个值。

store.$patch((state) => {
        state.name= 'newName'
        state.age ++
      })

3、使用actions

推荐。

actions:{
    async login(user: string, password: string) {
      //模拟异步登录
      const userData = await apiLogin(user, password)
      //更新state中数据
      this.$patch({
        name: user,
        ...userData,
      })
    }
}

2.6 storeToRefs

为了直接获取store中的属性,我们可能会利用解构来直接获取:

import { useUserStore } from "./store/user"

const { name }= useUserStore()

但是,值得注意的是,如果直接解构store实例来获取state中的值,那么获取的值就失去了响应式,正确的做法是使用storeToRefs:

import { storeToRefs } from 'pinia'
import { useUserStore } from "./store/user"

const { name }= storeToRefs(useUserStore())

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/36690.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

4. 云计算中的存储基础知识

4.1 物理磁盘类型和存储设备类型 虚拟化中的存储架构 物理磁盘类型 - SATA盘 SATA的全称Serial Advanced Technology Attachment&#xff0c;SATA&#xff08;Serial ATA&#xff09;口的硬盘又叫串口硬盘。SATA采用串行连接方式&#xff0c;串行ATA总线使用嵌入式时钟信号&a…

kubernetes组件 Controller manager深刻认知

kubernetes组件 Controller manager深刻认知Controller manager常见的controllerController manager的工作流程informer的内部机制控制器的协同工作原理ReplicaSet controller 是如何被管理的&#xff1f;statefuleset 和deployment controller是如何控制滚动升级的statefulese…

学习基于html和JavaScript的滑动图片拼图验证源码

之前的文章《使用C#中的GDI功能实现图片填充验证方式》中介绍过使用GDI在Winform中实现图片拼图验证的思路&#xff0c;学了html中的canvas使用方式后&#xff0c;也可以照搬思路实现&#xff0c;只不过没有在Winform中方便。但是在网上看了不少基于html和JavaScript的滑动图片…

【数据结构】栈的模拟和使用理解

学习目录栈(Stack)栈的概念栈的使用栈相关的应用场景栈的模拟实现中缀表达式 转 后缀表达式栈(Stack) 栈的概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作. 进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底&a…

关于vba代码运行时错误1004 应用程序定义或对象定义错误问题

一、错误描述 将Excel所有工作表&#xff0c;汇总到一个工作表中&#xff1a; 在thisworkbook中运行如下&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 Su…

大数据面试题(五):Hadoop优化核心高频面试题

文章目录 Hadoop优化核心高频面试题 一、Mapreduce 跑的慢的原因&#xff1f; 1、计算机性能 2、I/O 操作优化 二、Mapreduce优化方法 1、数据输入 2、map阶段 3、reduce阶段 4、IO传输 5、数据倾斜问题 6、常用的调优参数 三、HDFS小文件优化方法 1、HDFS小文件…

【MATLAB】常见语法结构和实用操作

目录 语法结构 循环&#xff08;遍历&#xff09;结构 函数结构 画图操作 绘制函数图像 ezplot figure多图绘制 创建多项式 按照系数创建多项式 利用多项式零点创建多项式 解方程组 语法结构 循环&#xff08;遍历&#xff09;结构 与其它编程语言类似&#xff0c;…

常用辅助类

CountDownLatch 应用场景&#xff1a;1.多线程任务汇总。2.多线程任务阻塞住&#xff0c;等待发令枪响&#xff0c;一起执行。 减法计数器 每次有线程调用&#xff0c;数量-1&#xff0c;当计数器归零&#xff0c;countDownLatch.await()就会被唤醒向下执行。 import java.uti…

【代码随想录】二刷-二叉树

二叉树 《代码随想录》 二叉树的遍历方式 深度优先遍历: 前序遍历(递归法、迭代法): 中左右中序遍历(递归法、迭代法): 左中右后序遍历(递归法、迭代法): 左右中 广度优先遍历: 层序遍历(迭代法) 二叉树的定义 struct TreeNode{int val;TreeNode* left;TreeNode* right;TreeN…

无线传感器网络:网络层

文章目录Challenges for RoutingEnergy EfficiencyScalabilityAddressingRobustnessTopologyApplicationRouting MetricsQuality-of-Service (QoS)Minimum HopEnergyMinimum energy consumed per packetMaximum time to network partitionMaximum average energy capacityMaxim…

Java并发-操作系统,进程,线程,并行并发?

我们首先来看看&#xff0c;三者之间的关系&#xff0c;从图中可以看到 操作系统是包含多个进程的容器&#xff1b;而每个进程又是容纳多个线程的容器。什么是进程&#xff1f;官方定义&#xff1a; 进程&#xff08;baiProcess&#xff09;是计算机中的程序关于某数据集合上的…

详解:网络虚拟化卸载加速技术的演进

在传统的应用场景中&#xff0c;服务器资源过剩情况普遍&#xff0c;为了充分利用服务器资源&#xff0c;产生了虚拟化技术。虚拟化技术以牺牲部分效率为代价提升了资源的使用率&#xff0c;将原来需要硬件完成的工作&#xff0c;通过软件模拟的方式&#xff0c;满足多个云租户…

初识Qt Quick

讲讲最近几年Qt的热门技术Quick这一块了。 啥是Qt&#xff1f; 哦&#xff0c;这是一个宣称可以跨任意平台&#xff0c;开发各种场景应用软件的开发框架。从三个维度来讲&#xff0c;就是开发库framework&#xff0c;集成开发平台IDE&#xff0c;以及成熟的开发思维模式。 Q…

CAS:82055-94-5,Azide-PEG-Azide,N3-PEG-N3,叠氮聚乙二醇叠氮试剂供应

1、名称 英文&#xff1a;Azide-PEG-Azide&#xff0c;N3-PEG-N3 中文&#xff1a;叠氮-聚乙二醇-叠氮 2、CAS编号&#xff1a;82055-94-5 3、所属分类&#xff1a;Azide PEG 4、分子量&#xff1a;可定制&#xff0c;叠氮-PEG-叠氮 2000、叠氮peg叠氮 1000、叠氮-聚乙二醇…

org.activiti.bpmn

org.activiti.bpmn目录概述需求&#xff1a;设计思路实现思路分析1.BpmnAutoLayout2.BPMNLayout参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for ch…

Mybatis概述

1 概述 原来是Apache的一个开源项目&#xff0c;叫iBatis, 2010年6月这个项目由 Apache Software Foundation 迁移到了 Google Code&#xff0c;随着开发团队转投Google Code 旗下&#xff0c;从 iBatis3.0正式更名为MyBatis。 MyBatis 是一款优秀的持久层框架&#xff0c;对j…

容器卷挂载的秘密

什么是容器卷 数据卷 &#xff08;Data Volumes &#xff09;是一个可供容器使用的特殊目录&#xff0c;它将主机操作系统目录直接映射进容器&#xff0c;类似于 Linux 中的 mount 行为。 容器挂载原理 containerd创建的容器里的数据存储在下面的目录中 [rootmaster01 httpb…

【C/C++】万字图文详解C语言文件操作 完美装饰课设大作业

目标导航 写在前面 为什么使用文件&#xff1f; 什么是文件&#xff1f; 程序文件 数据文件 认识文件名 文件的打开和关闭 文件指针 文件的打开和关闭 1.以"r"&#xff08;只读&#xff09;的方式打开文件 2.以"w"&#xff08;只写&#xff09;…

Java#24(常见API--2)

目录 一.Rantime Runtime表示当前虚拟机的运行环境 Runtime常用方法 扩展:对象克隆 二.Objects Objects是一个对象工具类,提供了一些操作对象的方法 一.Rantime Runtime表示当前虚拟机的运行环境 Runtime常用方法 方法名 作用 publi…

葡萄糖-聚乙二醇-链霉亲和素|Streptavidins-PEG-Glucose|链霉亲和素-PEG-葡萄糖

链霉亲和素(streptavidin下称SA)是与亲和素(avidin下称AV)是一种蛋白质&#xff0c;链霉亲和素是四聚体蛋白&#xff0c;大小为66KDa。一分子链霉亲和素可以高度特异性地与四分子生物素结合&#xff0c;两者之间的亲和力较为强烈。链霉亲和素分子由4条相同的肽链组成&#xff0…