Vue3 之 Pinia

news2024/11/16 23:56:11
什么是Pinia

Pinia是一个Vue的专属的最新状态管理库,是vuex状态管理工具的替代品

Pinia的优势

1.提供更加简单的API(去掉了 mutation)
2.提供符合组合式风格的API(和vue3语法统一)
3.去掉了modules的概念,每一个store都是一个独立的模块
4.搭配TypeScript一起使用提供可靠的类型推断

添加Pinia到vue项目

1.使用create-vue创建空的项目

npm init vue@latest

在这里插入图片描述

2.安装pinia到项目

npm install pinia

在这里插入图片描述

Pinia的基础使用

1.使用Pinia实现计数器案例
步骤:1️⃣定义store
2️⃣组件中使用store 在这里插入图片描述

// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
//定义数据(state)
  const count = ref(0)
 //定义修改数据的方法(action同步+异步)
  function increment() {
    count.value++
  }
//以对象的方式return共组件使用
  return { count, increment }
})
//组件中使用
<script setup>
  //1.导入use打头的方法
  import {useCounterStore} from '@/stores/counter'
  //2.执行方法得到store实例对象
  const counterStore = useCounterStore()
</script>
<template>
 <button @click='counterStore.increment'>{{counterStore.count}}</button>
</template>
Pinia—getters和异步action
getters实现

Pinia中的getters直接使用computed函数进行模拟
在这里插入图片描述
在这里插入图片描述

action实现

action中实现异步和组件中定义数据和方法的风格完全一致
在这里插入图片描述
在这里插入图片描述

Pinia—storeToRefs

storeToRefs
使用storeToRefs函数可以辅助保持数据(state和getter)的响应式解构
在这里插入图片描述
在这里插入图片描述

总结

1️⃣Pinia是用来做什么的?
集中状态管理工具,新一代的vuex

2️⃣Pinia中还需要mutation吗?
不需要,action既支持同步也支持异步

3️⃣Pinia如何实现getter?
computed计算性函数

4️⃣Pinia产生的Store如何解构赋值数据保持响应式?
storeToRefs

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

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

相关文章

推荐一款开源的跨平台划词翻译和OCR翻译软件:Pot

Pot简介 一款开源的跨平台划词翻译和OCR翻译软件 下载安装指南 根据你的机器型号下载对应版本&#xff0c;下载完成后双击安装即可。 使用教程 Pot具体功能如下&#xff1a; 划词翻译输入翻译外部调用鼠标选中需要翻译的文本&#xff0c;按下设置的划词翻译快捷键即可按下输…

已解决:tpm2_createpriimay: command not found

出现错误如下&#xff1a; ERROR: Could not change hierarchy for Owner. TPM Error:0x9a2 ERROR: Could not change hierarchy for Endorsement. TPM Error:0x9a2 ERROR: Could not change hierarchy for Lockout. TPM Error:0x98e ERROR: Unable to run tpm2_takeownership…

【经典项目】Java实现打地鼠小游戏(附源码)

一、游戏回顾 打地鼠游戏是一款简单而有趣的反应游戏。游戏中&#xff0c;你需要在地洞中出现的地鼠出现时迅速点击它们&#xff0c;以获得分数。以下是一般的打地鼠游戏玩法介绍&#xff1a; 准备阶段&#xff1a;游戏开始时&#xff0c;你会看到一个由多个地洞组成的游戏界面…

百面嵌入式专栏(面试题)C语言面试题22道

沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将介绍C语言相关面试题 。 宏定义是在编译的哪个阶段被处理的?答案:宏定义是在编译预处理阶段被处理的。 解读:编译预处理:头文件包含、宏替换、条件编译、去除注释、添加行号。 写一个“标准”宏MIN,这个…

C#,栅栏油漆算法(Painting Fence Algorithm)的源代码

1 刷油漆问题 给定一个有n根柱子和k种颜色的围栏&#xff0c;找出油漆围栏的方法&#xff0c;使最多两个相邻的柱子具有相同的颜色。因为答案可以是大的&#xff0c;所以返回10^97的模。 计算结果&#xff1a; 2 栅栏油漆算法的源程序 using System; namespace Legalsoft.Tr…

机器学习 | 揭示EM算法和马尔可夫链的实际应用

目录 初识EM算法 马尔可夫链 HMM模型基础 HMM模型使用 初识EM算法 EM算法是一种求解含有隐变量的概率模型参数的迭代算法。该算法通过交替进行两个步骤&#xff1a;E步骤和M步骤&#xff0c;从而不断逼近模型的最优参数值。EM算法也称期望最大化算法&#xff0c;它是一个基…

C++进阶(十二)lambda可变参数包装器

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、新的类功能1、默认成员函数2、类成员变量初始化3、 强制生成默认函数的关键字default:4、…

拿捏循环链表

目录&#xff1a; 一&#xff1a;单链表&#xff08;不带头单向不循环&#xff09;与循环链表&#xff08;带头双向循环&#xff09;区别 二&#xff1a;循环链表初始化 三&#xff1a;循环链表头插 四&#xff1a;循环链表尾插 五&#xff1a;循环链表头删 六&#xff1…

【leetcode】深搜、暴搜、回溯、剪枝(C++)1

深搜、暴搜、回溯、剪枝&#xff08;C&#xff09;1 一、全排列1、题目描述2、代码3、解析 二、子集1、题目描述2、代码3、解析 三、找出所有子集的异或总和再求和1、题目描述2、代码3、解析 四、全排列II1、题目解析2、代码3、解析 五、电话号码的字母组合1、题目描述2、代码3…

华为 Huawei 交换机 黑洞MAC地址的作用和配置示例

黑洞mac作用&#xff1a;某交换机上配置某个PC的mac地址为黑洞mac&#xff0c;那么这台PC发出来的包都会被交换机丢弃&#xff0c;不会被转发到网络中。 组网需求&#xff1a; 如 图 2-13 所示&#xff0c;交换机 Switch 收到一个非法用户的访问&#xff0c;非法用户的 MAC 地址…

Java实现民宿预定管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用例设计2.2 功能设计2.2.1 租客角色2.2.2 房主角色2.2.3 系统管理员角色 三、系统展示四、核心代码4.1 查询民宿4.2 新增民宿4.3 新增民宿评价4.4 查询留言4.5 新增民宿订单 五、免责说明 一、摘要 1.1 项目介绍 基于…

幻兽帕鲁官方服务器不稳定怎么办?5秒钟自建幻兽帕鲁服务器

幻兽帕鲁太火了&#xff0c;官方palworld服务器不稳定&#xff1f;不如自建服务器&#xff0c;基于腾讯云幻兽帕鲁服务器成本32元全自动部署幻兽帕鲁服务器&#xff0c;超简单有手就行&#xff0c;全程自动化一键部署10秒钟即可搞定&#xff0c;无需玩家手动部署幻兽帕鲁游戏程…

时光峰峦文物璀璨,预防性保护筑安全

在璀璨的历史长河中&#xff0c;珍贵文物如同时间的印记&#xff0c;承载着过往的辉煌。《人文山水时光峰峦——多彩贵州历史文化展》便是这样一场文化的盛宴&#xff0c;汇聚了众多首次露面的宝藏。然而&#xff0c;文物的保存对环境要求极为苛刻&#xff0c;温湿度波动都可能…

十六、Vben框架table内部合并行

在vben项目中合并内部的行是一个常规的操作,以前我们说过如果是一条数据内部只需要分割拿高撑开就可以实现,在第三章的时候我们已经讲过了,那么如果是不定的条数合并为一条数据呢,怎么能够实现呢,下面我们就来讲讲。 先看效果图 如图,能看到是三条数据,其实是…

用keytool 生成JWT的RSA非对称密钥

写在前面 JWT 令牌 可以由 X.509 证书或 256 位非对称密钥签名来充当&#xff0c;为了获得合法的JWT 令牌&#xff0c;我们可以使用JDK中的keytool.exe工具来生成。 本例的操作环境是Windows系统&#xff0c;操作的前置条件需要先安装好JDK&#xff0c;并配置好环境变量&…

Unity类银河恶魔城学习记录4-4 4-5 P57-58 On Hit Impactp- Attack‘direction fix源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Entity.cs using System.Collections; using System.Collections.Generic;…

计算机视觉讲座PPT分享

最近在电子工业出版社做的《计算机视觉入门路线图》讲座的部分PPT。 主要介绍了计算机视觉的学习基本路线。

yolov8使用旋转框自己做数据集检测

主要在数据集制作&#xff0c;训练的步骤和目标检测是一样的 1.数据集标注主要使用rolabelimg工具&#xff0c;这个工具不能在线安装 得下载源代码 然后运行 标注好数据保存会是一个xml文件 2.把xml文件转换成dota的xml文件&#xff0c;然后把dota的xml文件转换成dota的txt文件…

如何决定K8S Pod的剔除优先级

在Kubernetes&#xff08;k8s&#xff09;中&#xff0c;当节点资源面临压力时&#xff0c;如何决定Pod的优先级是一个关键问题。在Kubernetes 1.8版本之后&#xff0c;引入了基于Pod优先级的调度策略&#xff0c;即Pod Priority Preemption。这种策略允许在资源不足的情况下&a…

docker部署docker运维工具

简介 主要功能:管理容器,管理镜像,管理容器网络 安装 拉取镜像 docker pull joinsunsoft/docker.ui:1.0.1 启动容器 docker run -d --name docker.ui --restart always -v /var/run/docker.sock:/var/run/docker.sock -p 10039:8999 joinsunsoft/docker.ui:1.0.1 使用 打…