【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>
以上三种修改方式的应用场景如下:
- 如果只要修改一个状态变量,并且不需要额外的操作,那么推荐使用第一种方法。
- 如果要一次性修改多个状态变量,那么推荐使用$patch方法,效率更高。
- 如果在修改状态变量的同时要做一些额外的操作,那么推荐第三种方法。
三、一个更真实的例子
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 文章目录 系列文章目录前言一、安装和配置:二、基本使用三、一个更真实的例子 前言 Pinia是Vue.js应用程序的状态管理库。它提供了一种简单,轻量级的解决方案,用于在Vue应用程序中管理和维护状态。Pinia库的特点…...
帕金森病患者的生命长度:科学管理与乐观心态是关键
在快节奏的现代生活中,健康成为了我们最宝贵的财富之一。然而,当“帕金森病”这个名词悄然进入我们的视野时,不少人心中难免会涌起一丝不安与担忧。帕金森病,作为一种常见的神经系统退行性疾病,确实给患者的日常生活带…...
详解Linux中cat命令
在 Linux 命令的世界中,cat 命令就像是一位多才多艺的艺术家,它能够将文本文件的美妙旋律编织在一起,或者单独演奏它们的每一个音符。下面,让我们以一种充满情感的方式,用 Markdown 格式来探索 cat 命令的多种用途。 …...
Mysql高级篇(中)—— SQL优化之查询截取分析
SQL优化之查询截取分析 一、慢查询日志(1)简述(2)如何开启(3)慢查询日志分析工具介绍(了解)(4)官方工具 mysqldumpslow简述如何使用 二、SHOW PROCESSLIST三、(了解&…...
企业如何制作一个官方网站?
随着实体宣传的减弱,提高线上的宣传是新式的宣传方式,那么企业搭建网站成为线上宣传的重要途径。企业如何去搭建网站呢?如何拥有一个专业的网站来展示企业文化和企业销售产品?今天我给大家带来干货:如何一步步构建自己…...
游戏开发2025年最新版——八股文面试题(unity,虚幻,cocos都适用)
1.静态合批与动态合批的原理是什么?有什么限制条件?为什么?对CPU和GPU产生的影响分别是什么? 原理:Unity运行时可以将一些物体进行合并,从而用一个描绘调用来渲染他们,就是一个drawcall批次。 限…...
如何查看线程
1、首先找到我们的电脑安装jdk的位置,这里给大家展示一下博主本人的电脑jdk路径下的jconsole位置。 2、 ok,那么找到这个jconsole程序我们直接双击打开就可以查看我们电脑的本地进程: jconsole 这里能够罗列出你系统上的 java 进程࿰…...
详细分析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(save方法添加了Tra…...
Redis数据类型,使用场景,事物及分布式锁
文章目录 关于Redis1.常用数据类型1.字符串(String)2.哈希(Hash)3.列表(List)4.集合(Set)5.有序集合(Sorted Set)6.位图(Bitmap)7.超日…...
目标检测系列(一)什么是目标检测
目录 一、相关名词解释 二、目标检测算法 三、目标检测模型 四、目标检测应用 五、目标检测数据集 六、目标检测常用标注工具 一、相关名词解释 关于图像识别的计算机视觉四大类任务: 分类(Classification):解决“是什么&…...
STM32CubeIDE | 使用HAL库的ADC读取内部传感器温度
1、cubemx配置 1.1、系统配置 1.2、GPIO配置 PB2设置为“GPIO_Output” user label设置为“LED” 1.3、串口配置 模式选择为“Asynchronous”,其他默认 1.4、时钟树配置 全部保持默认 2、ADC配置 通道选择“Temperature Sensor Channel”,其他默认 …...
茶思屋直播|TinyEngine+AI:聚焦主航道,在实践中探索低代码技术黑土地
低代码引擎使能开发者定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过cli创建个人工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发ÿ…...
Ansible流程控制-条件_循环_错误处理_包含导入_块异常处理
文章目录 Ansible流程控制介绍1. 条件判断2. 循环3. 循环控制4. 错误处理5. 包含和导入6. 块和异常处理7. 角色的流程控制*include_tasks、import_tasks_include之间的区别 条件语句再细说且、或、非、是模糊条件when指令的详细使用方法 循环语句再细说如何使用使用item变量结合…...
Mybatis-为什么使用Mybatis,它存在哪些优点和缺点?
优点: 基于 SQL 语句编程,相当灵活,不会对应用程序或者数据库的现有设计造成任何影响,SQL单独写,解除SQL与程序代码的耦合,便于统⼀管理。与 JDBC 相比,减少了 50%以上的代码量,消除…...
银河麒麟高级服务器操作系统V10外接硬盘挂载指南
银河麒麟高级服务器操作系统V10外接硬盘挂载指南 1、临时挂载外接硬盘2、永久挂载外接硬盘3、总结 💖The Begin💖点点关注,收藏不迷路💖 在使用银河麒麟高级服务器操作系统V10时,您可能希望将外接硬盘(如sd…...
免费制作证件照的小程序源码
1、效果展示 证件照制作,证件照免费制作,证件照调用api源码,解析代码。证件照制作小程序包,可以下载程序包,最初级版本免费下载。以上是高级版本。如果你有开发能力的话可以自己写前端,然后以下调用以下api…...
面经宝典【1】-拼多多
这个专题我主要想的是吧这些面经题目给整合起来,自己时不时可以看看然后回答回答,然后再根据一些面经去查漏补缺,具体的答案我都记录在在自己的语雀笔记当中,如果想要的可以私聊我,当然这些答案一般在网上都能找到。 今…...
AI画图用到的网站与资源
1、画图 爱灯泡 midjourney官网 可以使用stable-diffusion的网站 2、素材 花瓣 figma 3、...
C++——多线程编程(从入门到放弃)
进程:运行中的程序 线程:进程中的进程 线程的最大数量取决于CPU的核心数 一、将两个函数添加到不同线程中 demo:两个函数test01()和test02(),实现将用户输入的参数进行打印输出1000次 将这两个函数均放到独立的线程t1和t2中&…...
江协科技STM32学习- P14 示例程序(定时器定时中断和定时器外部时钟)
🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
