Vue3中Pinia状态管理库学习笔记
pinia的基本使用
<template><div><h2>Home View</h2> <h2>count:{{ counterStore.count }}</h2><h2>count:{{ count }}</h2><button @click="increment">count+1</button></div>
</template>
<script setup>import { toRefs } from 'vue'import useCounter from '@/stores/counter';const counterStore = useCounter()const { count } = toRefs(counterStore)function increment(){counterStore.count++}
</script>
<style scoped>
</style>
store/counter.js
// 定义关于counter的store
import { defineStore } from 'pinia'import useUser from './user'
const useCounter = defineStore("counter",{state:()=>({count:99,friends:[{id:111,name:"why"},{id:112,name:"kobe"},{id:113,name:"james"},]}),getters:{// 1.基本使用doubleCount(state){return state.count * 2},// 2.一个getter引入另一个getterdoubleCountAddOne(){// this 是store实例return this.doubleCount+1},// 3.getters也支持返回一个函数getFriendById(state){return function(id){for(let i = 0;i<state.friends.length;i++){const friend = state.friends[i]if(friend.id === id){return friend}}// return state.friends.find()}},// 4.getters如果用到了别的store中的数据showMessage(state){// 1.获取user信息const userStore = useUser()// 2.获取自己的信息// 3.拼接信息return `name:${userStore.name}-count:${state.count}`}},actions:{increment(state){console.log(state)this.count++},incrementNum(num){this.count += num}}
})export default useCounter
pinia的核心State
<template><div><h2>Home View</h2> <h2>name:{{ name }}</h2><h2>age:{{ age }}</h2><h2>level:{{ level }}</h2><button @click="changeState">修改state</button><button @click="resetState">重置state</button></div>
</template>
<script setup> import useUser from "@/stores/user";import { storeToRefs } from 'pinia';const userStore = useUser();// console.log(userStore)const { name,age,level } = storeToRefs(userStore)function changeState(){// 1. 一个个修改状态// userStore.name = "kobe"// userStore.age = 20// userStore.level = 200// 2.一次性修改多个状态// userStore.$patch({// name:"james",// age:35,// })// 3.替换state为新的对象const oldState = userStore.$state = {name:"curry",level:200}console.log(oldState === userStore.$state)}function resetState(){userStore.$reset()}
</script>
<style scoped>
</style>
store/user.js
import { defineStore } from 'pinia'const useUser = defineStore("user",{state:()=>({name:"why",age:18,level:100})
});export default useUser
pinia的核心Getters
<template><div><h2>Home View</h2> <h2>doubleCount:{{ counterStore.doubleCount }}</h2><h2>doubleCountAddOne:{{ counterStore.doubleCountAddOne }}</h2><h2>friend-111:{{ counterStore.getFriendById(111) }}</h2><h2>friend-112:{{ counterStore.getFriendById(112) }}</h2><h2>showMessage:{{ counterStore.showMessage }}</h2><button @click="changeState">修改state</button><button @click="resetState">重置state</button></div>
</template>
<script setup> import useCounter from '@/stores/counter';const counterStore = useCounter()
</script>
<style scoped>
</style>
store/counter.js
// 定义关于counter的store
import { defineStore } from 'pinia'import useUser from './user'
const useCounter = defineStore("counter",{state:()=>({count:99,friends:[{id:111,name:"why"},{id:112,name:"kobe"},{id:113,name:"james"},]}),getters:{// 1.基本使用doubleCount(state){return state.count * 2},// 2.一个getter引入另一个getterdoubleCountAddOne(){// this 是store实例return this.doubleCount+1},// 3.getters也支持返回一个函数getFriendById(state){return function(id){for(let i = 0;i<state.friends.length;i++){const friend = state.friends[i]if(friend.id === id){return friend}}// return state.friends.find()}},// 4.getters如果用到了别的store中的数据showMessage(state){// 1.获取user信息const userStore = useUser()// 2.获取自己的信息// 3.拼接信息return `name:${userStore.name}-count:${state.count}`}},actions:{increment(state){console.log(state)this.count++},incrementNum(num){this.count += num}}
})export default useCounter
网络请求
<template><div><h2>Home View</h2> <h2>doubleCount:{{ counterStore.count }}</h2><button @click="changeState">修改state</button><!-- 展示数据 --><h2>轮播的数据</h2><ul><template v-for="item in homeStore.banners" :key="item.id"><li>{{ item.title }}</li></template></ul></div>
</template>
<script setup> import useCounter from '@/stores/counter';import useHome from '@/stores/home'const counterStore = useCounter()function changeState(){counterStore.increment();// counterStore.incrementNum(10);}const homeStore = useHome();homeStore.fetchHomeMultidata().then(res =>{console.log("fetchHomeMultidata的action已经完成了",res)});
</script>
<style scoped>
</style>
stores/counter
// 定义关于counter的store
import { defineStore } from 'pinia'import useUser from './user'
const useCounter = defineStore("counter",{state:()=>({count:99,friends:[{id:111,name:"why"},{id:112,name:"kobe"},{id:113,name:"james"},]}),getters:{// 1.基本使用doubleCount(state){return state.count * 2},// 2.一个getter引入另一个getterdoubleCountAddOne(){// this 是store实例return this.doubleCount+1},// 3.getters也支持返回一个函数getFriendById(state){return function(id){for(let i = 0;i<state.friends.length;i++){const friend = state.friends[i]if(friend.id === id){return friend}}// return state.friends.find()}},// 4.getters如果用到了别的store中的数据showMessage(state){// 1.获取user信息const userStore = useUser()// 2.获取自己的信息// 3.拼接信息return `name:${userStore.name}-count:${state.count}`}},actions:{increment(state){console.log(state)this.count++},incrementNum(num){this.count += num}}
})export default useCounter
stores/home
import { defineStore } from "pinia";const useHome = defineStore("home",{state:()=>({banners:[],recommends:[]}),actions:{// async fetchHomeMultidata(){// const res = await fetch("http://123.207.32.32:8000/home/multidata")// const data = await res.json();// this.banners = data.data.banner.list// this.recommends = data.data.recommend.list// return 'aaa';// }fetchHomeMultidata(){// eslint-disable-next-line no-async-promise-executorreturn new Promise(async (resolve,reject)=>{const res = await fetch("http://123.207.32.32:8000/home/multidata")const data = await res.json();this.banners = data.data.banner.listthis.recommends = data.data.recommend.listresolve("bbb")})}}
})
export default useHome
感谢大家观看,我们下次见
相关文章:
Vue3中Pinia状态管理库学习笔记
pinia的基本使用 <template><div><h2>Home View</h2> <h2>count:{{ counterStore.count }}</h2><h2>count:{{ count }}</h2><button click"increment">count1</button></div> </template>…...
共谋企业出海新篇章纷享销客荣获数字中国企业峰会“卓越成果奖”
3月9日,2024数字中国企业峰会在杭州西湖中维香溢大酒店成功举办,众多数字化领域专家、知名企业 CIO 代表到场。峰会旨在推动数字化转型与创新发展,为企业出海和国际合作搭建交流与合作的平台。本次峰会的颁奖环节,纷享销客凭借其卓…...
【MySQL】group_concat 函数和 locate 函数运用之找到每篇文章的主题
力扣题 1、题目地址 2199. 找到每篇文章的主题 2、模拟表 表:Keywords Column NameTypetopic_idintwordvarchar (topic_id, word) 是该表的主键(具有唯一值的列的组合)。该表的每一行都包含一个主题的 id 和一个用于表达该主题的词。可…...
RedisCluster集群中的插槽为什么是16384个?
RedisCluster集群中的插槽为什么是16384个? CRC16的算法原理。 1.根据CRC16的标准选择初值CRCIn的值2.将数据的第一个字节与CRCIn高8位异或3.判断最高位,若该位为0左移一位,若为1左移一位再与多项式Hex码异或4.重复3至9位全部移位计算结束5…...
一直出现问题,发现服务器磁盘空间已满导致,腾出服务器磁盘空间命令
要解决服务器磁盘空间已满的问题,你可以按照以下步骤操作: 查看磁盘使用情况:使用df -h, du -s -h ./*命令来查看服务器的磁盘空间使用情况。查找大文件:使用du -a | sort -rn | head -5命令来找出占用空间最大的前5个…...
吴恩达机器学习笔记 二十三 倾斜数据集的误差指标 精确率 召回率 精确率与召回率的平衡 F1分数
如果数据集的正例和反例的比例非常倾斜,常用的错误指标如 准确率(accuracy) 并不好用。此时可以用精确率和召回率。 精确率(precision):真阳的样本数/预测为阳的样本数真阳数/(真阳假阳) 召回率(recall):…...
无人游艇的研发和开发对于多个领域具有重要
无人游艇的研发和开发对于多个领域具有重要性。 首先,无人游艇可以在海上进行各种任务,如海洋科学研究、资源勘探和监测、海洋环境保护等。相比传统的人工操作船只,无人游艇可以长时间在海上工作,可以自动化执行任务,…...
在AI创业热潮下,如何抓住AI赚钱机会,实现人生逆袭
随着人工智能技术的迅猛发展,AI创业热潮正席卷全球。这不仅为科技领域的专业人士提供了无限的商机,也为普通人开辟了全新的赚钱途径。本文将为您揭示在AI创业热潮下,普通人如何抓住AI赚钱机会,实现人生逆袭,同时探讨哪些行业适合应用AI技术。 一、普通人如何抓住AI赚钱机…...
JETSON 配置并跑通 NanoDet
JETSON 配置 NanoDet 文章目录 JETSON 配置 NanoDetNanoDet 介绍源码环境搭建及测试配置 NanoDet 的环境环境配置过程中遇到的问题:环境配置完毕验证 NanoDet NanoDet 介绍 可以参考这个博客:NanoDet:这是个小于4M超轻量目标检测模型 源码 …...
突破编程_C++_C++11新特性(unordered_multimap)
1 概述 std::unordered_multimap 是一个哈希表实现的无序容器,它存储的元素是键值对,并且允许键的重复。这意味着同一个键可以关联多个值。在 std::unordered_multimap 中,元素的插入顺序是不确定的,并且不会因为元素的插入、删除…...
15.WEB渗透测试--Kali Linux(三)
免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:14.WEB渗透测试--Kali Linux(二)-CSDN博客 Kali工具使用 3389远…...
Android-Framework pm list packages和pm install返回指定应用信息
一、环境 高通 Android 13 注:Android10 和Android13有些差异,代码位置不变,参照修改即可 二、pm简单介绍 pm工具为包管理(package manager)的简称 可以使用pm工具来执行应用的安装和查询应用宝的信息、系统权限、…...
CSS
什么是CSS? CSS是一门语言,用于控制网页表现 CSS(Cascading Style Sheet):层叠样式表 W3C标准:网页主要由三部分组成 结构:HTML表现:CSS行为:JavaScript CSS导入方式…...
算法详解——选择排序和冒泡排序
一、选择排序 选择排序算法的执行过程是这样的:首先,算法遍历整个列表以确定最小的元素,接着,这个最小的元素被置换到列表的开头,确保它被放置在其应有的有序位置上。接下来,从列表的第二个元素开始&#x…...
图论(蓝桥杯 C++ 题目 代码 注解)
目录 迪杰斯特拉模板(用来求一个点出发到其它点的最短距离): 克鲁斯卡尔模板(用来求最小生成树): 题目一(蓝桥王国): 题目二(随机数据下的最短路径&#…...
矩阵起源新一年喜报连连!
新春伊始 矩阵起源向大家分享 一连串好消息 首先,公司创始人兼CEO王龙先生获评“2023深圳创新突出贡献人物“。这一荣誉是对其在推动数据库行业技术创新和产品开发方面所做出的卓越贡献的认可。他的领导力和创新精神不仅引领我司取得了显著的成就,也为…...
牛客——紫魔法师(并查集)
链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 题目描述 “サーヴァント、キャスター、Medea。”--紫魔法师 给出一棵仙人掌(每条边最多被包含于一个环,无自环,无重边,保证连通),要求用最少的…...
最新WooCommerce教程指南-如何搭建B2C外贸独立站
WooCommerce是全球最受欢迎的开源电子商务平台之一。它基于WordPress建站,只需一键安装即可使用。该平台提供了丰富的功能,包括产品发布、库存管理、支付网关和运输发货等,可以帮助搭建各种类型的电子商务网站。相比其他竞争对手,…...
一文教会你SpringBoot是如何启动的
SpringBoot启动流程分析 流程图 源码剖析 运行Application.run()方法 我们在创建好一个 SpringBoot 程序之后,肯定会包含一个类:xxxApplication,我们也是通过这个类来启动我们的程序的(梦开始的地方),而…...
车载测试面试:各大车企面试题汇总
本博主可协助大家成功进军车载测试行业 TBOX 深圳 涉及过T-BOX测试吗Ota升级涉及的台架环境是什么样的?上车实测之前有没有一个仿真环境台架环境都什么零部件T-BOX了解多少Linux和shell有接触吗 单片机uds诊断是在实车上座的吗 uds在实车上插的那口 诊断仪器是哪…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
