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

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日&#xff0c;2024数字中国企业峰会在杭州西湖中维香溢大酒店成功举办&#xff0c;众多数字化领域专家、知名企业 CIO 代表到场。峰会旨在推动数字化转型与创新发展&#xff0c;为企业出海和国际合作搭建交流与合作的平台。本次峰会的颁奖环节&#xff0c;纷享销客凭借其卓…...

【MySQL】group_concat 函数和 locate 函数运用之找到每篇文章的主题

力扣题 1、题目地址 2199. 找到每篇文章的主题 2、模拟表 表&#xff1a;Keywords Column NameTypetopic_idintwordvarchar (topic_id, word) 是该表的主键&#xff08;具有唯一值的列的组合&#xff09;。该表的每一行都包含一个主题的 id 和一个用于表达该主题的词。可…...

RedisCluster集群中的插槽为什么是16384个?

RedisCluster集群中的插槽为什么是16384个&#xff1f; CRC16的算法原理。 1.根据CRC16的标准选择初值CRCIn的值2.将数据的第一个字节与CRCIn高8位异或3.判断最高位&#xff0c;若该位为0左移一位&#xff0c;若为1左移一位再与多项式Hex码异或4.重复3至9位全部移位计算结束5…...

一直出现问题,发现服务器磁盘空间已满导致,腾出服务器磁盘空间命令

要解决服务器磁盘空间已满的问题&#xff0c;你可以按照以下步骤操作&#xff1a; 查看磁盘使用情况&#xff1a;使用df -h&#xff0c; du -s -h ./*命令来查看服务器的磁盘空间使用情况。查找大文件&#xff1a;使用du -a | sort -rn | head -5命令来找出占用空间最大的前5个…...

吴恩达机器学习笔记 二十三 倾斜数据集的误差指标 精确率 召回率 精确率与召回率的平衡 F1分数

如果数据集的正例和反例的比例非常倾斜&#xff0c;常用的错误指标如 准确率(accuracy) 并不好用。此时可以用精确率和召回率。 精确率&#xff08;precision&#xff09;&#xff1a;真阳的样本数/预测为阳的样本数真阳数/&#xff08;真阳假阳&#xff09; 召回率(recall):…...

无人游艇的研发和开发对于多个领域具有重要

无人游艇的研发和开发对于多个领域具有重要性。 首先&#xff0c;无人游艇可以在海上进行各种任务&#xff0c;如海洋科学研究、资源勘探和监测、海洋环境保护等。相比传统的人工操作船只&#xff0c;无人游艇可以长时间在海上工作&#xff0c;可以自动化执行任务&#xff0c;…...

在AI创业热潮下,如何抓住AI赚钱机会,实现人生逆袭

随着人工智能技术的迅猛发展,AI创业热潮正席卷全球。这不仅为科技领域的专业人士提供了无限的商机,也为普通人开辟了全新的赚钱途径。本文将为您揭示在AI创业热潮下,普通人如何抓住AI赚钱机会,实现人生逆袭,同时探讨哪些行业适合应用AI技术。 一、普通人如何抓住AI赚钱机…...

JETSON 配置并跑通 NanoDet

JETSON 配置 NanoDet 文章目录 JETSON 配置 NanoDetNanoDet 介绍源码环境搭建及测试配置 NanoDet 的环境环境配置过程中遇到的问题&#xff1a;环境配置完毕验证 NanoDet NanoDet 介绍 可以参考这个博客&#xff1a;NanoDet&#xff1a;这是个小于4M超轻量目标检测模型 源码 …...

突破编程_C++_C++11新特性(unordered_multimap)

1 概述 std::unordered_multimap 是一个哈希表实现的无序容器&#xff0c;它存储的元素是键值对&#xff0c;并且允许键的重复。这意味着同一个键可以关联多个值。在 std::unordered_multimap 中&#xff0c;元素的插入顺序是不确定的&#xff0c;并且不会因为元素的插入、删除…...

15.WEB渗透测试--Kali Linux(三)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;14.WEB渗透测试--Kali Linux&#xff08;二&#xff09;-CSDN博客 Kali工具使用 3389远…...

Android-Framework pm list packages和pm install返回指定应用信息

一、环境 高通 Android 13 注&#xff1a;Android10 和Android13有些差异&#xff0c;代码位置不变&#xff0c;参照修改即可 二、pm简单介绍 pm工具为包管理&#xff08;package manager&#xff09;的简称 可以使用pm工具来执行应用的安装和查询应用宝的信息、系统权限、…...

CSS

什么是CSS&#xff1f; CSS是一门语言&#xff0c;用于控制网页表现 CSS&#xff08;Cascading Style Sheet&#xff09;&#xff1a;层叠样式表 W3C标准&#xff1a;网页主要由三部分组成 结构&#xff1a;HTML表现&#xff1a;CSS行为&#xff1a;JavaScript CSS导入方式…...

算法详解——选择排序和冒泡排序

一、选择排序 选择排序算法的执行过程是这样的&#xff1a;首先&#xff0c;算法遍历整个列表以确定最小的元素&#xff0c;接着&#xff0c;这个最小的元素被置换到列表的开头&#xff0c;确保它被放置在其应有的有序位置上。接下来&#xff0c;从列表的第二个元素开始&#x…...

图论(蓝桥杯 C++ 题目 代码 注解)

目录 迪杰斯特拉模板&#xff08;用来求一个点出发到其它点的最短距离&#xff09;&#xff1a; 克鲁斯卡尔模板&#xff08;用来求最小生成树&#xff09;&#xff1a; 题目一&#xff08;蓝桥王国&#xff09;&#xff1a; 题目二&#xff08;随机数据下的最短路径&#…...

矩阵起源新一年喜报连连!

新春伊始 矩阵起源向大家分享 一连串好消息 首先&#xff0c;公司创始人兼CEO王龙先生获评“2023深圳创新突出贡献人物“。这一荣誉是对其在推动数据库行业技术创新和产品开发方面所做出的卓越贡献的认可。他的领导力和创新精神不仅引领我司取得了显著的成就&#xff0c;也为…...

牛客——紫魔法师(并查集)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 “サーヴァント、キャスター、Medea。”--紫魔法师 给出一棵仙人掌(每条边最多被包含于一个环&#xff0c;无自环&#xff0c;无重边&#xff0c;保证连通)&#xff0c;要求用最少的…...

最新WooCommerce教程指南-如何搭建B2C外贸独立站

WooCommerce是全球最受欢迎的开源电子商务平台之一。它基于WordPress建站&#xff0c;只需一键安装即可使用。该平台提供了丰富的功能&#xff0c;包括产品发布、库存管理、支付网关和运输发货等&#xff0c;可以帮助搭建各种类型的电子商务网站。相比其他竞争对手&#xff0c;…...

一文教会你SpringBoot是如何启动的

SpringBoot启动流程分析 流程图 源码剖析 运行Application.run()方法 我们在创建好一个 SpringBoot 程序之后&#xff0c;肯定会包含一个类&#xff1a;xxxApplication&#xff0c;我们也是通过这个类来启动我们的程序的&#xff08;梦开始的地方&#xff09;&#xff0c;而…...

车载测试面试:各大车企面试题汇总

本博主可协助大家成功进军车载测试行业 TBOX 深圳 涉及过T-BOX测试吗Ota升级涉及的台架环境是什么样的&#xff1f;上车实测之前有没有一个仿真环境台架环境都什么零部件T-BOX了解多少Linux和shell有接触吗 单片机uds诊断是在实车上座的吗 uds在实车上插的那口 诊断仪器是哪…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...