Pinia小菠萝(状态管理器)

Pinia 是一个专为 Vue 3 设计的状态管理库,它借鉴了 Vuex 的一些概念,但更加轻量灵活。下面将详细介绍如何使用 Pinia 状态管理库:

  1. 安装 Pinia

    • 使用 npm:在项目目录下运行npm install pinia
    • 使用 yarn:在项目目录下运行yarn add pinia
  2. 创建 Pinia 实例

    • 在入口文件中引入并创建实例:在项目的入口文件(通常是main.jsmain.ts)中,导入并创建一个 Pinia 实例,然后将其挂载到应用程序上。
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'//1.到入createPinia
import { createPinia } from 'pinia'//2.执行方法得到实例
const pinia = createPinia()//3.把pinia实例加入到app应用中createApp(App).use(pinia).mount('#app')

                2.自定义一个组件,该类编写在components/stores/counter.js

// 导入一个方法 defineStoreimport {defineStore} from 'pinia'
import { ref } from 'vue'export const useCounterStore = defineStore('counter',()=>{const count = ref(0)//定义修改数据的方法(active 同步 + 异步)const increate = () =>{count.value++;}//将对象的方法使用return供组件使用return {count,increate}})

在App.vue中使用该组件

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

测试  结果:

getter方法的定义

    //getter的定义const doubeleCount = computed(() =>count.value * 2)//将对象的方法使用return供组件使用return {count,increate,doubeleCount}
<template><div><p>Count: {{ counterStore.count }}</p><p>DoubleCount:{{ counterStore.doubeleCount }}</p></div>
</template>

效果:

异步action

首先安装依赖 npm install axios

其次,在组件中导出调用异步的方法getList

// 导入一个方法 defineStore
import {defineStore} from 'pinia'
import { ref,computed } from 'vue'
import axios from 'axios'const API_URL = 'https://jsonplaceholder.typicode.com/todos'export const useCounterStore = defineStore('counter',()=>{//定义异步actionconst list = ref([])const getlist = async () =>{const res = await axios.get(API_URL)list.value = res.dataconsole.log(list.value);}//将对象的方法使用return供组件使用return {getlist,list}
})

在组件中,引入并且调用方法即可

<template><div><p>Count: {{ counterStore.count }}</p><p>DoubleCount:{{ counterStore.doubeleCount }}</p><button @click="counterStore.increate()">Increment</button><button @click="counterStore.getlist()">getListData</button><hr><ol v-for="item in counterStore.list" :key="item.id"><li >{{ item.title }}</li><li >{{ item.completed }}</li><li >{{ item.userId }}</li></ol></div>
</template>

效果:

初始界面:

点击getListData按钮后:

storeToRefs解构赋值

首先,引入相关依赖 storeToRefs,然后将响应式对象进行解构赋值

( 方法不需要使用storeToRefs解构赋值 切记!!!)

//针对响应式对象的解构赋值
const { count, doubeleCount, list } = storeToRefs(counterStore);
//对于方法的解构赋值(不需要使用storeToRefs)
const { increate,getlist } = counterStore;

此外,方法解构赋值,在调用方法时,括号加不加都行

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

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

相关文章

【智能算法应用】哈里斯鹰算法优化二维栅格路径规划问题

摘要 本文研究了基于哈里斯鹰优化算法&#xff08;Harris Hawks Optimization, HHO&#xff09;的二维栅格路径规划方法。HHO算法模拟哈里斯鹰的猎食行为&#xff0c;通过迭代搜索过程找到从起点到终点的最优路径&#xff0c;避开栅格中的障碍物。实验结果表明&#xff0c;HHO…

vue/react做多语言国际化的时候,在语言配置中不同的语言配置不同的字体,动态引入scss里面

如果想直接在vue文件的css里面使用&#xff0c;就可以使用i18n的t函数&#xff0c;注意t外层也有引号&#xff1a; font-size: v-bind("t(style.teamCurModelFontSize)"); 前提是要引入t函数&#xff1a;

优衣库在淘宝平台的全方位竞品分析与店铺表现研究:市场定位与竞争策略透视

优衣库品牌在淘宝平台的全方位竞品与店铺表现分析 一、品牌商品分析 1.商品列表与分类分析&#xff08;数据来源&#xff1a;关键词商品搜索接口&#xff1b;获取时间&#xff1a;2024.08.30&#xff09; 商品类别分布柱状图&#xff1a; 根据关键词商品搜索接口获取到的优衣…

spark新能源汽车推荐系统-计算机设计毕业源码42422

摘要 本论文致力于探讨基于Spark技术的新能源汽车推荐系统新能源汽车分析及可视化内容。系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;利用Python编程语言中的爬虫功能&#xff0c;实现对懂车帝的汽车信息数据的爬取&#xff0c;作为系统的数据来源&#xff0c;并…

Element UI组件Dialog显示闪动问题【解决方案】

在ElementUI中&#xff0c;el-dialog弹窗确实有时会导致页面出现抖动或闪动的问题。这通常是由于弹窗出现时对页面布局的影响&#xff0c;特别是滚动条的出现或消失&#xff0c;导致了页面的重新布局和渲染。以下是一些解决或缓解这一问题的方法&#xff1a; 解决方案 1. 关闭…

SpringBoot技术在企业资产管理中的应用

4系统概要设计 4.1概述 系统设计原则 以技术先进、系统实用、结构合理、产品主流、低成本、低维护量作为基本建设原则&#xff0c;规划系统的整体构架. 先进性&#xff1a; 在产品设计上&#xff0c;整个系统软硬件设备的设计符合高新技术的潮流&#xff0c;媒体数字化、压缩、…

月GMV2000W+,在视频号“开超市”也太赚了吧!

今年的视频号双11&#xff0c;似乎更低调了。 ▲ 图片来源&#xff1a;视频号 从官方的双11专栏来看&#xff0c;今年改叫“微信小店11.11好物节”。 今年618时候&#xff0c;还有专门的带货榜单&#xff0c;并且细分为“今日带货榜单、带货总榜、品牌带货榜、达人带货榜”&…

xlsx.js 读取excel文件

需求&#xff1a;读取一个excel文件。 一、 使用antd的Upload组件的 【customRequest】方法。 互斥。此方法跟【onChange】方法互斥&#xff0c;即&#xff1a;不可同时出现。调用次数不一样。onChange方法会根据文件当前的上传状态从而被调用多次&#xff08;读取中&#xff…

华为云创建ECS前台展示规格类型选项是怎么做到的?

前台展示很多规格可选,怎么做到的?先了解规格其实都是管理员在后台service_OM创建好规格 1.规格 1.1设置自定义标签打通规格和主机组还能体验调度功能 引申:AZ可用分区(为了做容灾) 为什么在界面可以让我√az0.dc0,在填工程参数openstack region信息已写 AZ间存储不能共…

我们来学mysql -- 同时使用 AND 和 OR 查询错误(填坑篇)

AND 和 OR 一同使用问题 现象分析处理扩展 现象 业务上在“锁定”当前零件所在出口国的所有零件时&#xff0c;出现其他国家零件 问题定位 分析 or 切断了操作符之间的连续性&#xff0c;从union角度分析 where k1 Td621 and k1 Vda96 or k3 P00009等同 select * fr…

Python入门:了解 Python 中 globals() 和 types 的用法

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 使用 `globals()` 获取当前作用域信息📝 使用 `types` 模块判断函数类型📝 `globals()` 与 `types` 结合使用📢 综合示例📝 总结⚓️ 相关链接 ⚓️📖 介绍 📖 在 Python 中,动态获取当前作用域…

InsectaIntel 智能昆虫识别平台

项目介绍 InsectaIntel智能昆虫识别平台是一款革命性的软件&#xff0c;它将尖端的计算机视觉和深度学习技术融入昆虫识别领域&#xff0c;为用户提供了一个前所未有的工具。该平台通过集成先进的技术&#xff0c;不仅提高了昆虫识别的准确性&#xff0c;还极大地增强了用户体…

Python数据分析NumPy和pandas(二十六、数据整理--连接、合并和重塑 之三:重塑和透视)

对表格数据的重新排列操作&#xff0c;称为 reshape 或 pivot 。有很多种方法对表格数据进行重塑。 一、使用分层索引进行reshape 分层索引提供了一种在 DataFrame 中重新排列数据的方法。主要有两个函数方法&#xff1a; stack&#xff1a;将数据中的列旋转或透视到行。 u…

新能源行业必会基础知识-----电力现货市场理论篇-----电力现货市场价格机制-----电力市场价格体系

新能源行业必会基础知识-----电力现货市场理论篇-----主目录-----持续更新https://blog.csdn.net/grd_java/article/details/143364261 这本书是2023年出版的&#xff0c;是当下了解国内电力市场最好的途径了。还是推荐大家买来这本书进行阅读观看&#xff0c;最好作为随身携带…

使用免费的飞书机器人,实现消息推送实时通知

大家好&#xff0c;我是小悟。 实际工作中&#xff0c;我们会经常遇到需要给用户发送业务通知的功能需求&#xff0c;如果是小程序端&#xff0c;那么就使用小程序提供的模板消息通知&#xff0c;如果是APP端&#xff0c;一般就是使用个推、极光等第三方平台。 当然还有个万能…

SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记

这是一篇港科大学生在google research 实习期间发在ECCV2024的语义引导生成式修复的文章&#xff0c;港科大陈启峰也挂了名字。从首页图看效果确实很惊艳&#xff0c;尤其是第三行能用文本调控修复结果牌上的字。不过看起来更倾向于生成&#xff0c;对原图内容并不是很复原&…

MySQL server 免安装教程

1&#xff0c;下载免安装包-社区版本 https://dev.mysql.com/downloads/file/?id534320 2&#xff0c;解压 放到一电脑某个路径下&#xff0c;整个包 3&#xff0c;创建data 文件夹和my.ini文件 my.ini代码照抄&#xff0c;注意修改路径&#xff0c;与解压后的安装包地址一…

网络基础知识--1

1. 说说HTTP常用的状态码及其含义 1.1日 常 开 发 中 的 这 几 个 状 态 码 的 含 义 2. HTTP 常用的请求方式&#xff0c;区别和用途 思 路 : 这 道 题 主 要 考 察 候 选 人 &#xff0c; 是 否 掌 握 H T T P 请 求 方 式 这 个 基 础 知 识 点 &#xff0c; 我 们 用 …

MySQL日志——针对实习面试

目录 MySQL日志MySQL有哪些日志&#xff1f;请解释一下MySQL的二进制日志&#xff08;Binlog&#xff09;的作用&#xff1f;复制&#xff08;Replication&#xff09;数据恢复&#xff08;Point-in-Time Recovery&#xff09; Binlog日志的三种格式是什么&#xff1f;如何使用…

CKA认证 | Day1 k8s核心概念与集群搭建

第一章 Kubernetes 核心概念 1、主流的容器集群管理系统 容器编排系统&#xff1a; KubernetesSwarmMesos Marathon 2、Kubernetes介绍 Kubernetes是Google在2014年开源的一个容器集群管理系统&#xff0c;Kubernetes简称K8s。 Kubernetes用于容器化应用程序的部署&#x…