当前位置: 首页 > news >正文

【Vue】Pinia

系列文章目录

第八章 Pinia


文章目录

  • 系列文章目录
  • 前言
  • 一、安装和配置:
  • 二、基本使用
  • 三、一个更真实的例子


前言

Pinia是Vue.js应用程序的状态管理库。它提供了一种简单,轻量级的解决方案,用于在Vue应用程序中管理和维护状态。Pinia库的特点是易于使用和集成,可以使开发者在不牺牲性能的情况下更有效地处理和维护状态。pinia中有三个概念,分别是:state、getter、action,对应于Vue组件中的:data、computed、methods。


一、安装和配置:

安装:通过命令:npm install pinia@2.1.7 ,或者在创建vue项目的时候勾选使用Pinia。
配置:在main.js中,需要创建pinia对象,并与app对象进行绑定,示例代码如下:

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'const app = createApp(App)
app.use(createPinia())
app.mount('#app')

二、基本使用

通常在src目录下创建一个stores文件夹,然后在里面按需创建js文件。假设要创建一个用于管理counter全局变量的库文件,那么可以创建counter.js文件,然后填入以下代码:

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})

或者使用选项式API:

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},// 也可以这样定义// state: () => ({ count: 0 })actions: {increment() {this.count++},},
})

这样就定义好了一个count变量,以后在组件中可以通过以下三种方式修改:

<script setup>
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
// 1. 直接修改
counterStore.count++
// 2. 使用$patch批量修改
counterStore.$patch({ count: counterStore.count + 1 })
// 3. 使用action修改
counterStore.increment()
</script>
<template><!-- 直接从 store 中访问 state --><div>Current Count: {{ counter.count }}</div>
</template>

以上三种修改方式的应用场景如下:

  1. 如果只要修改一个状态变量,并且不需要额外的操作,那么推荐使用第一种方法。
  2. 如果要一次性修改多个状态变量,那么推荐使用$patch方法,效率更高。
  3. 如果在修改状态变量的同时要做一些额外的操作,那么推荐第三种方法。

三、一个更真实的例子

import { defineStore } from 'pinia'
export const useTodos = defineStore('todos', {state: () => ({/** @type {{ text: string, id: number, isFinished: boolean }[]} */todos: [],/** @type {'all' | 'finished' | 'unfinished'} */filter: 'all',// 类型将自动推断为 numbernextId: 0,}),getters: {finishedTodos(state) {return state.todos.filter((todo) => todo.isFinished)},unfinishedTodos(state) {return state.todos.filter((todo) => !todo.isFinished)},/*** @returns {{ text: string, id: number, isFinished: boolean }[]}*/filteredTodos(state) {if (this.filter === 'finished') {// 调用其他带有自动补全的 getters ✨return this.finishedTodos} else if (this.filter === 'unfinished') {return this.unfinishedTodos}return this.todos},},actions: {// 接受任何数量的参数,返回一个 Promise 或不返回addTodo(text) {// 你可以直接变更该状态this.todos.push({ text, id: this.nextId++, isFinished: false })},},
})

相关文章:

【Vue】Pinia

系列文章目录 第八章 Pinia 文章目录 系列文章目录前言一、安装和配置&#xff1a;二、基本使用三、一个更真实的例子 前言 Pinia是Vue.js应用程序的状态管理库。它提供了一种简单&#xff0c;轻量级的解决方案&#xff0c;用于在Vue应用程序中管理和维护状态。Pinia库的特点…...

帕金森病患者的生命长度:科学管理与乐观心态是关键

在快节奏的现代生活中&#xff0c;健康成为了我们最宝贵的财富之一。然而&#xff0c;当“帕金森病”这个名词悄然进入我们的视野时&#xff0c;不少人心中难免会涌起一丝不安与担忧。帕金森病&#xff0c;作为一种常见的神经系统退行性疾病&#xff0c;确实给患者的日常生活带…...

详解Linux中cat命令

在 Linux 命令的世界中&#xff0c;cat 命令就像是一位多才多艺的艺术家&#xff0c;它能够将文本文件的美妙旋律编织在一起&#xff0c;或者单独演奏它们的每一个音符。下面&#xff0c;让我们以一种充满情感的方式&#xff0c;用 Markdown 格式来探索 cat 命令的多种用途。 …...

Mysql高级篇(中)—— SQL优化之查询截取分析

SQL优化之查询截取分析 一、慢查询日志&#xff08;1&#xff09;简述&#xff08;2&#xff09;如何开启&#xff08;3&#xff09;慢查询日志分析工具介绍(了解)&#xff08;4&#xff09;官方工具 mysqldumpslow简述如何使用 二、SHOW PROCESSLIST三、&#xff08;了解&…...

企业如何制作一个官方网站?

随着实体宣传的减弱&#xff0c;提高线上的宣传是新式的宣传方式&#xff0c;那么企业搭建网站成为线上宣传的重要途径。企业如何去搭建网站呢&#xff1f;如何拥有一个专业的网站来展示企业文化和企业销售产品&#xff1f;今天我给大家带来干货&#xff1a;如何一步步构建自己…...

游戏开发2025年最新版——八股文面试题(unity,虚幻,cocos都适用)

1.静态合批与动态合批的原理是什么&#xff1f;有什么限制条件&#xff1f;为什么&#xff1f;对CPU和GPU产生的影响分别是什么&#xff1f; 原理&#xff1a;Unity运行时可以将一些物体进行合并&#xff0c;从而用一个描绘调用来渲染他们&#xff0c;就是一个drawcall批次。 限…...

如何查看线程

1、首先找到我们的电脑安装jdk的位置&#xff0c;这里给大家展示一下博主本人的电脑jdk路径下的jconsole位置。 2、 ok&#xff0c;那么找到这个jconsole程序我们直接双击打开就可以查看我们电脑的本地进程&#xff1a; jconsole 这里能够罗列出你系统上的 java 进程&#xff0…...

详细分析Spring的动态代理机制

文章目录 1. JDK动态代理和CGLIB动态代理的区别1.1 适用范围1.2 生成的代理类1.3 调用方式 2. 问题引入3. 创建工程验证 Spring 默认采用的动态代理机制3.1 引入 Maven 依赖3.2 UserController.java3.3 UserService.java3.4 UserServiceImpl.java&#xff08;save方法添加了Tra…...

Redis数据类型,使用场景,事物及分布式锁

文章目录 关于Redis1.常用数据类型1.字符串&#xff08;String&#xff09;2.哈希&#xff08;Hash&#xff09;3.列表&#xff08;List&#xff09;4.集合&#xff08;Set&#xff09;5.有序集合&#xff08;Sorted Set&#xff09;6.位图&#xff08;Bitmap&#xff09;7.超日…...

目标检测系列(一)什么是目标检测

目录 一、相关名词解释 二、目标检测算法 三、目标检测模型 四、目标检测应用 五、目标检测数据集 六、目标检测常用标注工具 一、相关名词解释 关于图像识别的计算机视觉四大类任务&#xff1a; 分类&#xff08;Classification&#xff09;&#xff1a;解决“是什么&…...

STM32CubeIDE | 使用HAL库的ADC读取内部传感器温度

1、cubemx配置 1.1、系统配置 1.2、GPIO配置 PB2设置为“GPIO_Output” user label设置为“LED” 1.3、串口配置 模式选择为“Asynchronous”&#xff0c;其他默认 1.4、时钟树配置 全部保持默认 2、ADC配置 通道选择“Temperature Sensor Channel”&#xff0c;其他默认 …...

茶思屋直播|TinyEngine+AI:聚焦主航道,在实践中探索低代码技术黑土地

低代码引擎使能开发者定制低代码平台。它是低代码平台的底座&#xff0c;提供可视化搭建页面等基础能力&#xff0c;既可以通过线上搭配组合&#xff0c;也可以通过cli创建个人工程进行二次开发&#xff0c;实时定制出自己的低代码平台。适用于多场景的低代码平台开发&#xff…...

Ansible流程控制-条件_循环_错误处理_包含导入_块异常处理

文章目录 Ansible流程控制介绍1. 条件判断2. 循环3. 循环控制4. 错误处理5. 包含和导入6. 块和异常处理7. 角色的流程控制*include_tasks、import_tasks_include之间的区别 条件语句再细说且、或、非、是模糊条件when指令的详细使用方法 循环语句再细说如何使用使用item变量结合…...

Mybatis-为什么使用Mybatis,它存在哪些优点和缺点?

优点&#xff1a; 基于 SQL 语句编程&#xff0c;相当灵活&#xff0c;不会对应用程序或者数据库的现有设计造成任何影响&#xff0c;SQL单独写&#xff0c;解除SQL与程序代码的耦合&#xff0c;便于统⼀管理。与 JDBC 相比&#xff0c;减少了 50%以上的代码量&#xff0c;消除…...

银河麒麟高级服务器操作系统V10外接硬盘挂载指南

银河麒麟高级服务器操作系统V10外接硬盘挂载指南 1、临时挂载外接硬盘2、永久挂载外接硬盘3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在使用银河麒麟高级服务器操作系统V10时&#xff0c;您可能希望将外接硬盘&#xff08;如sd…...

免费制作证件照的小程序源码

1、效果展示 证件照制作&#xff0c;证件照免费制作&#xff0c;证件照调用api源码&#xff0c;解析代码。证件照制作小程序包&#xff0c;可以下载程序包&#xff0c;最初级版本免费下载。以上是高级版本。如果你有开发能力的话可以自己写前端&#xff0c;然后以下调用以下api…...

面经宝典【1】-拼多多

这个专题我主要想的是吧这些面经题目给整合起来&#xff0c;自己时不时可以看看然后回答回答&#xff0c;然后再根据一些面经去查漏补缺&#xff0c;具体的答案我都记录在在自己的语雀笔记当中&#xff0c;如果想要的可以私聊我&#xff0c;当然这些答案一般在网上都能找到。 今…...

AI画图用到的网站与资源

1、画图 爱灯泡 midjourney官网 可以使用stable-diffusion的网站 2、素材 花瓣 figma 3、...

C++——多线程编程(从入门到放弃)

进程&#xff1a;运行中的程序 线程&#xff1a;进程中的进程 线程的最大数量取决于CPU的核心数 一、将两个函数添加到不同线程中 demo&#xff1a;两个函数test01()和test02()&#xff0c;实现将用户输入的参数进行打印输出1000次 将这两个函数均放到独立的线程t1和t2中&…...

江协科技STM32学习- P14 示例程序(定时器定时中断和定时器外部时钟)

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...