当前位置: 首页 > 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在实车上插的那口 诊断仪器是哪…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...