Vue3 使用 pinia

什么是Pinia

Pinia是 Vue 的存储库，它允许您跨组件/页面共享状态，与vuex功能一样。

准备

安装

npm install pinia
或者
yarn add pinia

使用

首先修改main.ts文件

main.ts

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'const app = createApp(App)
const pinia = createPinia()
// 使用pinia
app.use(pinia)
// 挂载到 #app
app.mount('#app')

现在若有多个组件要使用count组件中的 count 值 和 LoveTalk 组件中的 talkList 值，可使用 Pinia 将这些值存储到一个文件里，使用时直接导入提取即可。
首先在 src 文件夹下创建 store 文件夹用于存放相关ts文件，然后创建useCountStore.ts 和 useTalkListStore.ts文件。

useCountStore.ts

import { defineStore } from "pinia";export const useCountStore = defineStore("count", {actions:{increment(value: number){if (this.count < 10){this.count += value;}}},state(){return {count: 0,school:'atguigu',address:'宏福科技园'}},
});

useTalkListStore

import axios from "axios";
import { nanoid } from "nanoid";
import { defineStore } from "pinia";export const useTalkListStore = defineStore("talkList", {actions:{async getATalk(){let {data:{content:title}}  = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');let obj = {id: nanoid(), title}this.talkList.unshift(obj);}},state(){return {talkList: [{id:'ftrfasdf01',title:'今天你有点怪，哪里怪？怪好看的！'},{id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓，今天想我了没？'},{id:'ftrfasdf03',title:'心里给你留了一块地，我的死心塌地'}]}},
});

使用定义在store中的数据。

Count.vue

<script lang="ts" setup name="Count">import { ref } from 'vue';import { useCountStore } from '@/store/useCountStore';import { storeToRefs } from 'pinia';let countStore = useCountStore();let n = ref(1);let { count, address, school } = storeToRefs(countStore);function add() {//第一种修改数据方式// countStore.count += n.value;// countStore.address = '北京市海淀区';// countStore.school = '清华大学';//第二种修改数据方式// countStore.$patch({//     count: countStore.count + n.value,//     address: '北京市海淀区',//     school: '清华大学'// });//第三种修改数据方式countStore.increment(n.value);}function minus() {}
</script><template><div class="count"><!-- <h1>Count: {{ countStore.count }}</h1><h2>地址: {{ countStore.address }}， 名称: {{ countStore.school }}</h2> --><h1>Count: {{ count }}</h1><h2>地址: {{ address }}， 名称: {{ school }}</h2><button @click="add">加</button><button @click="minus">减</button><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>
</template><style scoped>.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}select,button {margin: 0 5px;height: 25px;}
</style>

LoveTalk.vue

<script lang="ts" setup name="LoveTalk">import axios from 'axios';import { reactive } from 'vue';import { nanoid } from 'nanoid';import { useTalkListStore } from '@/store/useTalkListStore';let talkListStore = useTalkListStore();function addTalk() {talkListStore.getATalk();}
</script><template><div class="talk"><h2>LoveTalk</h2><ul><li v-for="talk in talkListStore.talkList" :key="talk.id"> {{ talk.title }} </li></ul><button @click="addTalk">获取一条土味情话</button></div>
</template><style scoped>.talk {background-color: orange;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}
</style>

上面两个组件实现了一个计数器和展示土味情话功能。Count组件中 select 标签中若不使用.number将字符串转化为数字，在点击 “加”按钮时会使用字符串拼接方式，例如选择2后，点击“加”后，数字就变成了字符串12。

实现效果

在这里插入图片描述

getters

useCountStore.ts

如果对 state 中的数据不满意，想要添加数据时，可以用getters方式，修改useCountStore.ts代码

import { defineStore } from "pinia";export const useCountStore = defineStore("count", {actions:{increment(value: number){if (this.count < 10){this.count += value;}},decrement(value: number){if (this.count > 0){this.count -= value;}}},state(){return {count: 0,school:'atguigu',address:'宏福科技园'}},// 通过 getters 添加新数据getters:{// 需要接受 state 作为参数bigSum(state){return state.count * 2;},smallSum: state => state.count - 1,upperSchool(state){return state.school.toUpperCase();}}
});

Count.vue

修改 Count.vue

<script lang="ts" setup name="Count">import { ref } from 'vue';import { useCountStore } from '@/store/useCountStore';import { storeToRefs } from 'pinia';let countStore = useCountStore();let n = ref(1);// 通过 storeToRefs 得到 getters 添加到的数据let { count, address, school, bigSum, smallSum, upperSchool } = storeToRefs(countStore);function add() {//第一种修改数据方式// countStore.count += n.value;// countStore.address = '北京市海淀区';// countStore.school = '清华大学';//第二种修改数据方式// countStore.$patch({//     count: countStore.count + n.value,//     address: '北京市海淀区',//     school: '清华大学'// });//第三种修改数据方式countStore.increment(n.value);}function minus() {countStore.decrement(n.value);}
</script><template><div class="count"><!-- <h1>Count: {{ countStore.count }}</h1><h2>地址: {{ countStore.address }}， 名称: {{ countStore.school }}</h2> --><h1>Count: {{ count }}</h1><h2>地址: {{ address }}， 名称: {{ school }}</h2><h2>bigSum： {{ bigSum }}</h2><h2>smallSum： {{ smallSum }}</h2><h2>upperSchool： {{ upperSchool }}</h2><button @click="add">加</button><button @click="minus">减</button><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>
</template><style scoped>.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}select,button {margin: 0 5px;height: 25px;}
</style>

实现效果

在这里插入图片描述

$subscribe

Vue中可以用watch来监听数据的变化
同理，Pinia的store中的数据发生变化，可以用$subscribe来监听

这一篇，$subscribe+localStorage实现数据存储的案例，来介绍这个API的功能

LoveTalk.vue

<script lang="ts" setup name="LoveTalk">import axios from 'axios';import { reactive } from 'vue';import { nanoid } from 'nanoid';import { useTalkListStore } from '@/store/useTalkListStore';let talkListStore = useTalkListStore();//这个API的作用，类似于Vue中的watch，监听store中的数据变化talkListStore.$subscribe((mutate, state) => {localStorage.setItem('talkList', JSON.stringify(state.talkList));})function addTalk() {talkListStore.getATalk();}
</script><template><div class="talk"><h2>LoveTalk</h2><ul><li v-for="talk in talkListStore.talkList" :key="talk.id"> {{ talk.title }} </li></ul><button @click="addTalk">获取一条土味情话</button></div>
</template><style scoped>.talk {background-color: orange;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}
</style>

useTalkListStore.ts

import axios from "axios";
import { nanoid } from "nanoid";
import { defineStore } from "pinia";export const useTalkListStore = defineStore("talkList", {actions:{async getATalk(){let {data:{content:title}}  = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');let obj = {id: nanoid(), title}this.talkList.unshift(obj);}},state(){return {talkList: JSON.parse(localStorage.getItem('talkList') as string || '[]')}},
});

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

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

相关文章

《强烈推荐一个强大的书签管理工具》

《强烈推荐一个强大的书签管理工具》

在信息爆炸的时代&#xff0c;我们每天都会浏览大量的网页&#xff0c;收藏各种各样的书签。然而&#xff0c;随着书签数量的增加&#xff0c;管理起来也变得越来越困难。这时&#xff0c;一个强大的书签管理工具就显得尤为重要。今天&#xff0c;我要向大家推荐一款备受好评的…
阅读更多...
[控制理论]—差分变换法与双线性变换法的基本原理和代码实现

[控制理论]—差分变换法与双线性变换法的基本原理和代码实现

差分变换法与双线性变换法的基本原理和代码实现 1.差分变换法 差分变换法就是把微分方程中的导数用有限差分来近似等效&#xff0c;得到一个与原微分方程逼近的差分方程。 差分变换法包括后向差分与前向差分。 1.1 后向差分法 差分变换如下&#xff1a; d e ( t ) d t e…
阅读更多...
下一个赛场见！从中网看海尔智家的全球化布局

下一个赛场见！从中网看海尔智家的全球化布局

下一个赛场见&#xff01; 我想这是每个看完中国网球公开赛女子决赛后&#xff0c;清晰又坚定的约定。正如国庆假期后&#xff0c;下一个假期见成为很多人的期待。 10月6日&#xff0c;备受瞩目的中国网球公开赛女子决赛迎来了最高光时刻并落下帷幕。 美国选手高芙获得冠军&…
阅读更多...
如何高效开展关联方风险监控？

如何高效开展关联方风险监控？

关联方风险监控是指对企业与其关联方之间的交易、资金往来、担保等行为进行监控&#xff0c;以识别和防范潜在的风险。以下是一些高效开展关联方风险监控的方法&#xff1a; 1.建立关联方识别机制&#xff1a; 明确关联方的定义&#xff0c;包括直接或间接控制企业的个人或实体…
阅读更多...
一个月学会Java 第5天 控制结构

一个月学会Java 第5天 控制结构

Day5 控制结构 这么叫可能有些就算有基础的人也看不懂&#xff0c;其实就是if-else、switch-case、for、while、do-while这几个&#xff0c;没基础的听到了这个也不要慌张&#xff0c;这几个是程序的基础&#xff0c;多多训练就好 第一章 顺序结构 这章其实没有什么好讲的&…
阅读更多...
大数据新视界 --大数据大厂之 Presto 性能优化秘籍：加速大数据交互式查询

大数据新视界 --大数据大厂之 Presto 性能优化秘籍：加速大数据交互式查询

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
算法：前缀和算法模版

算法：前缀和算法模版

一维前缀和 题目 链接&#xff1a;一维前缀和模版题 思路分析 一&#xff1a;暴力O(q * N) 对于每一次询问&#xff0c;我们都可以用一个循环计算[l,r]区间内的元素和&#xff0c; 时间复杂度&#xff0c;O(q * N) 每一次计算一个区间都需要去循环一次&#xff0c;这是不是…
阅读更多...
windows C++-创建图像处理的异步消息(二)

windows C++-创建图像处理的异步消息(二)

创建图像处理网络 此部分介绍如何创建对给定目录中的每个 JPEG (.jpg) 图像执行图像处理的异步消息块网络。 网络执行以下图像处理操作&#xff1a; 对于 Tom 创作的任何图像&#xff0c;转换为灰度。 对于任何以红色作为主色的图像&#xff0c;移除绿色和蓝色分量&#xff0…
阅读更多...
如何避免PuTTY的连接超时

如何避免PuTTY的连接超时

问题&#xff1a;使用PuTTY默认创建的SSH连接&#xff0c;过一会就会提示“Remote side unexpectedly closed network connection" 解决方法&#xff1a; 要防止PuTTY会话由于空闲而断开连接&#xff0c;可以通过启用keep-alives功能&#xff0c;使PuTTY定期向远程主机发…
阅读更多...
2-116 基于matlab的主成分分析（PCA）及累积总和（CUSUM）算法故障监测

2-116 基于matlab的主成分分析（PCA）及累积总和（CUSUM）算法故障监测

基于matlab的主成分分析&#xff08;PCA&#xff09;及累积总和&#xff08;CUSUM&#xff09;算法故障监测&#xff0c;针对传统的多元统计分析方法对生产过程中微小故障检测不灵敏的问题&#xff0c;使用基于主元分析的累积和的微小故障检测方法进行故障监测&#xff0c;通过…
阅读更多...
【多重循环在Java中的应用】

【多重循环在Java中的应用】

多重循环在Java中的应用 介绍 多重循环是将一个循环嵌套在另一个循环体内的编程结构。Java中的 for、while 和 do...while 循环均可作为外层循环和内层循环。建议使用两层嵌套&#xff0c;最多不超过三层&#xff0c;以保持代码的可读性。 在多重循环中&#xff0c;外层循环执…
阅读更多...
开源项目都是怎么推广的？

开源项目都是怎么推广的？

大家好&#xff0c;我是爱折腾的刘大逵。跟我接触过的技术们都知道&#xff0c;一年一年的都在折腾着做一些项目&#xff0c;年年有进步&#xff0c;年年有想法&#xff0c;年年在折腾。今天给大家分享GITEE如何上推荐&#xff01; GITEE推荐有什么用&#xff1f; 众所周知&a…
阅读更多...
DDD简介

DDD简介

概述 传统的数据驱动开发模式&#xff0c;View、Service、Dao这种三层分层模式&#xff0c;会很自然的写出过程式代码&#xff0c;这种开发方式中的对象只是数据载体&#xff0c;而没有行为&#xff0c;是一种贫血对象模型。以数据为中心&#xff0c;以数据库ER图为设计驱动&a…
阅读更多...
回到原点再出发

回到原点再出发

原文What Goes Around Comes Around作者Michael Stonebraker & Joseph M. Hellerstein其他译文https://zhuanlan.zhihu.com/p/111322429 1. 摘要 本文总结了近35年来的数据模型方案&#xff0c;分成9个不同的时代&#xff0c;讨论了每个时代的方案。我们指出&#xff0c;…
阅读更多...
Linux安装配置Jupyter Lab并开机自启

Linux安装配置Jupyter Lab并开机自启

文章目录 1、安装配置jupyter lab首先需要使用pip3安装&#xff1a;生成配置文件和密码&#xff1a; 2、设置开机自启首先通过which jupyter查询到可执行文件路径&#xff1a;设置自启服务&#xff1a; 1、安装配置jupyter lab 首先需要使用pip3安装&#xff1a; pip3 instal…
阅读更多...
（22）以RS码为例说明信道编码AWGN信道的Eb/N0设置

（22）以RS码为例说明信道编码AWGN信道的Eb/N0设置

文章目录 前言一、编码Eb/N0与未编码Eb/N0及编码码率二、仿真代码三、仿真结果 前言 本文说明了如何为采用信道编码的通信链路设置Eb/N0&#xff08;比特能量与噪声功率谱密度比&#xff09;。 一、编码Eb/N0与未编码Eb/N0及编码码率 在通信系统仿真中&#xff0c;如果采用了…
阅读更多...
10.8摩尔学习知识点

10.8摩尔学习知识点

今天学习获取数据 在摩尔云平台找到要修改的主视图&#xff0c;然后点击操作功能&#xff0c;点击新增&#xff0c;直接输入名字获取数据&#xff0c;然后&#xff0c;显示顺序15&#xff0c;显示是&#xff0c;点击确定&#xff0c;然后就是自定义类上面输入创建的类名&#…
阅读更多...
怎么在抖音直播间录屏？主播会知道吗？录屏软件推荐

怎么在抖音直播间录屏？主播会知道吗？录屏软件推荐

在抖音直播间录屏&#xff0c;主播通常不会收到直接通知提示某个观众正在录屏。在抖音直播间录屏&#xff0c;主播通常是不知道的。抖音平台没有为主播提供查看观众录屏行为的相关功能或提示&#xff0c;所以从平台功能角度来说&#xff0c;主播无法直接察觉观众的录屏操作。 然…
阅读更多...
『网络游戏』窗口基类【06】

『网络游戏』窗口基类【06】

创建脚本&#xff1a;WindowRoot.cs 编写脚本&#xff1a; 修改脚本&#xff1a;LoginWnd.cs 修改脚本&#xff1a;LoadingWnd.cs 修改脚本&#xff1a;ResSvc.cs 修改脚本&#xff1a;LoginSys.cs 运行项目 - 功能不变 本章结束
阅读更多...
职场中的人情世故，你懂了多少？

职场中的人情世故，你懂了多少？

职场如战场&#xff0c;稍有不慎&#xff0c;满盘皆输。 职场如江湖&#xff0c;不是打打杀杀&#xff0c;而是人情世故。 成年人的世界里没有“容易”二字&#xff0c;我们也需要懂得哪些人情世故和。 职场上的各种光怪陆离现象&#xff0c;有很多职场人吐槽&#xff1a;“…
阅读更多...
最新文章

Copyright @ 2022~2023