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

Pinia的基本用法

Pinia的安装和引入

1.安装Pinia

npm install pinia

2. 在vue项目的main.js文件中引入pinia

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

Pinia的基本使用

使用pinia实现计数器

1.在src目录下创建stores目录,并新建文件counter.js
在这里插入图片描述
**2. 在counter.js文件中使用defineStore定义对象useCounterStore **

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useCounterStore = defineStore('counter', () => {// 定义数据(state)const count = ref(0)// 定义修改数据的方法(action 同步+异步)const increment = () => {count.value++}// 以对象的方式return供组件使用return {count,increment}
})

**3.在App.vue文件中导入counter.js文件中的useCounterStore **

<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
</script><template><button @click="counterStore.increment"> {{ counterStore.count}} </button>
</template><style scoped></style>

getters和异步action

在counter.js文件中进行如下定义

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import axios from 'axios'const API_URL = "http://geek.itheima.net/v1_0/channels"
export const useCounterStore = defineStore('counter', () => {// 定义数据(state)const count = ref(0)// 定义修改数据的方法(action 同步+异步)const increment = () => {count.value++}// getter定义const doubleCount = computed(() => count.value * 2)// 定义异步actionconst list = ref([])const getList = async () => {const res = await axios.get(API_URL)list.value = res.data.data.channels}// 以对象的方式return供组件使用return {count,doubleCount,increment,list,getList}
})

在App.vue中使用

<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
onMounted(()=>{ // 挂载期发起请求counterStore.getList()
})
</script><template><button @click="counterStore.increment"> {{ counterStore.count}} </button>{{ counterStore.doubleCount }}<ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>

使用storeToRefs进行结构赋值,保持响应式更新

<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)// 直接结构赋值(响应式丢失)
// const { count, doubleCount} = counterStore
// console.log(count, doubleCount)// 方法包裹(保持响应式更新)
const { count, doubleCount } = storeToRefs(counterStore)
console.log(count, doubleCount)// 方法直接从原来的counterStore解构赋值
const { increment } = counterStore// 触发action
onMounted(()=>{ counterStore.getList()
})
</script><template><button @click="increment"> {{ count }} </button>{{ doubleCount }}<ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>

相关文章:

Pinia的基本用法

Pinia的安装和引入 1.安装Pinia npm install pinia2. 在vue项目的main.js文件中引入pinia import { createApp } from vue import { createPinia } from pinia import App from ./App.vueconst pinia createPinia() const app createApp(App)app.use(pinia) app.mount(#ap…...

正版软件 | DeskScapes:将您的桌面变成生动的画布

您是否厌倦了静态的桌面背景&#xff1f;Stardock 的 DeskScapes 软件赋予您将任何图片或视频动画化的能力&#xff0c;让您的 Windows 桌面焕发活力。 动画桌面&#xff0c;艺术生活 使用 DeskScapes 您可以将任何静态图片或视频转化为桌面背景。不仅如此&#xff0c;通过 60 …...

OpenCV cv::Mat到 Eigen 的正确转换——cv2eigen

在进行计算机视觉项目时&#xff0c;我们经常需要处理相机位姿的变换。最近&#xff0c;我在项目中遇到了一个看似简单但实际上颇具挑战性的问题&#xff1a;从 OpenCV 的 cv::Mat 格式转换到 Eigen 库的格式。这个过程中遇到了一些问题&#xff0c;但最终找到了一个稳健的解决…...

PostgreSQL的扩展(extensions)-常用的扩展-pg_pathman

PostgreSQL的扩展&#xff08;extensions&#xff09;-常用的扩展-pg_pathman pg_pathman 是一个用于 PostgreSQL 的分区管理扩展。它提供了一种高效的方式来管理和使用数据库分区&#xff0c;可以显著提升查询性能&#xff0c;特别是在处理大规模数据集时。 安装 pg_pathman…...

数据结构之树

基础知识&#xff1a; 树是一种非线性结构&#xff0c;其严格的数学定义是&#xff1a;如果一组数据中除了第一个节点&#xff08;第一个节点称为根节点&#xff0c;没有直接前驱节点&#xff09;之外&#xff0c;其余任意节点有且仅有一个直接前驱&#xff0c;有零个或多个直接…...

6毛钱SOT-23封装28V、400mA 开关升压转换器,LCD偏置电源和白光LED应用芯片TPS61040

SOT-23-5 封装 TPS61040 丝印PHOI 1 特性 • 1.8V 至 6V 输入电压范围 • 可调节输出电压范围高达 28V • 400mA (TPS61040) 和 250mA (TPS61041) 内部开关电流 • 高达 1MHz 的开关频率 • 28μA 典型空载静态电流 • 1A 典型关断电流 • 内部软启动 • 采用 SOT23-5、TSOT23…...

saga模型

​ Saga源于Hector Garcaa-Molrna和Kenneth Salem发表的论文Sagas。一个LLT事务&#xff08;Long Lived Transaction&#xff09;可以分成若干个小的事务执行单元&#xff0c;这些小执行单元就是saga事务。Saga方案更适合用于长事务场景。Saga模型将一个分布式事务拆分为多个本…...

深度神经网络:解锁智能的密钥

深度神经网络&#xff1a;解锁智能的密钥 在人工智能的浩瀚星空中&#xff0c;深度神经网络&#xff08;Deep Neural Networks, DNNs&#xff09;无疑是最耀眼的那颗星。它以其强大的学习能力、高度的适应性和广泛的应用场景&#xff0c;成为了我们解锁智能世界的一把密钥。本…...

国际现货黄金最新价格如何分析?结合较高的时间周期

国际现货黄金投资是一种24小时交易的品种&#xff0c;这意味着&#xff0c;在交易日我们打开电脑图表&#xff0c;分析完走势之后就有机会做交易了。但问题也出在这里&#xff0c;如果对国际现货黄金最新价格把握不住&#xff0c;分析和交易就无从谈起了&#xff0c;下面我们就…...

微服务和kafka

一、微服务简介 1.单体架构 分布式--微服务--云原生 传统架构&#xff08;单机系统&#xff09;&#xff0c;一个项目一个工程&#xff1a;比如商品、订单、支付、库存、登录、注册等等&#xff0c;统一部署&#xff0c;一个进程 all in one的架构方式&#xff0c;把所有的…...

Jetpack架构组件_Navigaiton组件_1.Navigaiton切换Fragment

1.Navigation主要作用 方便管理Fragment &#xff08;1&#xff09;方便我们管理Fragment页面的切换 &#xff08;2&#xff09;可视化的页面导航图&#xff0c;便于理清页面间的关系。 &#xff08;3&#xff09;通过destination和action完成页面间的导航 &#xff08;4&a…...

[计算机网络] 虚拟局域网

虚拟局域网 VLAN&#xff08;Virtual Local Area Network&#xff0c;虚拟局域网&#xff09;是将一个物理的局域网在逻辑上划分成多个广播域的技术。 通过在交换机上配置VLAN&#xff0c;可以实现在同一个VLAN 内的用户可以进行二层互访&#xff0c;而不同VLAN 间的用户被二…...

LabVIEW遇到无法控制国外设备时怎么办

当使用LabVIEW遇到无法控制国外产品的问题时&#xff0c;解决此类问题需要系统化的分析和处理方法。以下是详细的解决思路和具体办法&#xff0c;以及不同方法的分析和比较&#xff0c;包括寻求代理、国外技术支持、国内用过的人请教等内容。 1. 了解产品的通信接口和协议 思路…...

.hmallox勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言&#xff1a; 在当今数字化时代&#xff0c;勒索病毒已经成为网络安全的一大威胁&#xff0c;其中包括了最近出现的.hmallox勒索病毒。这类恶意软件不仅能够对计算机系统进行加密&#xff0c;还会要求用户支付赎金以换取解密密钥&#xff0c;给个人用户和企业带来了严重的…...

Redis发布、订阅模式(Pub/Sub)详解

Redis发布、订阅模式&#xff08;PUB-SUB&#xff09;详解 Redis的发布订阅&#xff08;Pub/Sub&#xff09;机制是一种消息通信模式&#xff0c;用于消息的广播。它允许多个客户端订阅&#xff08;Subscribe&#xff09;特定的频道&#xff08;Channel&#xff09;&#xff0c…...

Django-开发一个列表页面

需求 基于ListView,创建一个列表视图,用于展示"BookInfo"表的信息要求提供分页提供对书名,作者,描述的查询功能 示例展示: 1. 数据模型 models.py class BookInfo(models.Model):titlemodels.CharField(verbose_name"书名",max_length100)authormode…...

flink 处理函数和流转换

目录 处理函数分类 概览介绍 KeydProcessFunction和ProcessFunction 定时器TimeService 窗口处理函数 多流转换 分流-侧输出流 合流 联合&#xff08;Uniion&#xff09; 连接&#xff08;connect&#xff09; 广播连接流&#xff08;BroadcatConnectedStream&#xf…...

详细分析Springmvc中的@ModelAttribute基本知识(附Demo)

目录 前言1. 注解用法1.1 方法参数1.2 方法1.3 类 2. 注解场景2.1 表单参数2.2 AJAX请求2.3 文件上传 3. 实战4. 总结 前言 将请求参数绑定到模型对象上&#xff0c;或者在请求处理之前添加模型属性 可以在方法参数、方法或者类上使用 一般适用这几种场景&#xff1a; 表单…...

和利时SIS安全系统模块SGM210 SGM210-A02

和利时SIS安全系统模块SGM210 SGM210-A02 阀门定位器&#xff1a;&#xff08;福克斯波罗, YTC&#xff0c;山武&#xff09; PLC&#xff1a;&#xff08;西门子&#xff0c;施耐德&#xff0c;ABB,AB,三菱&#xff0c;欧姆龙&#xff09; 泵阀&#xff1a;&#xff08;力士…...

浔川3样AI产品即将上线!——浔川总社部

浔川3样AI产品即将上线&#xff01; 浔川AI翻译v3.0 即将上线&#xff01; 浔川画板v5.1 即将上线&#xff01; 浔川AI五子棋v1.4 即将上线&#xff01; 整体通告详见&#xff1a;浔川AI五子棋&#xff08;改进&#xff08;完整&#xff09;版1.3&#xff09;——浔川python社…...

OpenRocket:模型火箭仿真的全流程技术解决方案

OpenRocket&#xff1a;模型火箭仿真的全流程技术解决方案 【免费下载链接】openrocket Model-rocketry aerodynamics and trajectory simulation software 项目地址: https://gitcode.com/GitHub_Trending/op/openrocket OpenRocket作为一款开源的模型火箭仿真软件&…...

Qwen3-14B-AWQ模型效果深度评测:在算法题求解上的表现

Qwen3-14B-AWQ模型效果深度评测&#xff1a;在算法题求解上的表现 1. 评测背景与模型简介 在AI技术快速发展的今天&#xff0c;大语言模型在代码生成和算法解题领域展现出越来越强的能力。Qwen3-14B-Int4-AWQ作为通义千问系列的最新量化版本&#xff0c;在保持较高推理能力的…...

3步释放20GB空间:给Android用户的系统减负指南

3步释放20GB空间&#xff1a;给Android用户的系统减负指南 【免费下载链接】universal-android-debloater Cross-platform GUI written in Rust using ADB to debloat non-rooted android devices. Improve your privacy, the security and battery life of your device. 项目…...

OpenCore辅助工具(OCAT)全攻略:从配置到优化的黑苹果必备工具

OpenCore辅助工具(OCAT)全攻略&#xff1a;从配置到优化的黑苹果必备工具 【免费下载链接】OCAuxiliaryTools Cross-platform GUI management tools for OpenCore&#xff08;OCAT&#xff09; 项目地址: https://gitcode.com/gh_mirrors/oc/OCAuxiliaryTools 核心价值&…...

注意力机制融合新范式:从GCNet与DANet看全局建模的演进与实战

1. 视觉注意力机制的进化之路 记得我第一次接触视觉注意力机制是在2016年&#xff0c;那时ResNet刚掀起深度学习的新浪潮。当时最让我困惑的是&#xff1a;为什么神经网络需要"注意力"&#xff1f;后来在ImageNet数据集上做实验时才明白&#xff0c;传统CNN就像近视眼…...

FPGA信号调试必备:Quartus中keep、preserve、noprune的正确用法与避坑指南

FPGA信号调试必备&#xff1a;Quartus中keep、preserve、noprune的正确用法与避坑指南 在FPGA开发过程中&#xff0c;信号调试是最令人头疼的环节之一。特别是当你发现仿真时明明存在的关键信号&#xff0c;在综合后却神秘消失时&#xff0c;那种挫败感简直难以言表。作为一名长…...

音频标注:从原理到产业,AI听懂世界的“翻译官”

音频标注&#xff1a;从原理到产业&#xff0c;AI听懂世界的“翻译官” 引言 在人工智能的浪潮中&#xff0c;计算机视觉的“看”和自然语言处理的“读”已广为人知&#xff0c;而让机器学会“听”——理解并解析复杂的声音世界&#xff0c;正成为新的前沿。这一切的基石&…...

HunyuanVideo-Foley保姆级教程:从零部署到音效生成的5个关键步骤

HunyuanVideo-Foley保姆级教程&#xff1a;从零部署到音效生成的5个关键步骤 1. 环境准备与镜像部署 1.1 硬件要求检查 在开始部署前&#xff0c;请确保您的设备满足以下最低配置要求&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090/4090D&#xff08;24GB显存&#xff09;内…...

手把手教你用readelf解析DWARF栈信息(含常见错误排查)

深入解析DWARF栈信息&#xff1a;从readelf实战到疑难排查 调试二进制文件时&#xff0c;栈信息的解析往往是定位问题的关键。当程序崩溃或异常时&#xff0c;理解调用栈的状态不仅能帮助我们快速定位问题&#xff0c;还能揭示更深层次的运行机制。本文将带你深入探索如何利用r…...

临近起飞,在哪个平台更容易捡漏特价机票?2026年实测指南

“机票越临近起飞越便宜”——这个说法你一定听过。每逢假期临近&#xff0c;总有人在社交媒体上分享自己“起飞前两小时抢到白菜价机票”的神奇经历。但当你真的想在清明、五一出行前“赌一把”时&#xff0c;往往发现价格不仅没降&#xff0c;反而翻倍了。那么问题来了&#…...