Pinia的十个简答小案例

      

1. 使用Pinia进行状态管理:

import { defineStore } from 'pinia'export const useCounterStore = defineStore({id: 'counter',state: () => ({count: 0}),actions: {increment() {this.count++},decrement() {this.count--}}
})

2. 在组件中使用Pinia:

<template><div><p>{{ counter.count }}</p><button @click="counter.increment()">Increment</button><button @click="counter.decrement()">Decrement</button></div>
</template><script>
import { useCounterStore } from './store'export default {setup() {const counter = useCounterStore()return {counter}}
}
</script>

3. 使用getters获取状态:

import { defineStore } from 'pinia'export const useCounterStore = defineStore({id: 'counter',state: () => ({count: 0}),getters: {isPositive() {return this.count > 0}},actions: {increment() {this.count++},decrement() {this.count--}}
})

4. 在另一个store中依赖另一个store:

import { defineStore } from 'pinia'
import { useCounterStore } from './counter'export const useUserStore = defineStore({id: 'user',state: () => ({name: 'test',age: 20}),getters: {message() {return `${useCounterStore().count} ${this.name} ${this.age}`}}
})

5. 在插件中注册store:

import { createPinia } from 'pinia'
import { useCounterStore } from './store'const app = createApp(App)app.use(createPinia())app.provide('counterStore', useCounterStore())app.mount('#app')

6. 在组件外部使用store:

import { useCounterStore } from './store'useCounterStore().increment()

7. 在store中使用localStorage:

import { defineStore } from 'pinia'export const useUserStore = defineStore({id: 'user',state: () => ({name: localStorage.getItem('name') || '',age: localStorage.getItem('age') || ''}),actions: {setName(name) {this.name = namelocalStorage.setItem('name', name)},setAge(age) {this.age = agelocalStorage.setItem('age', age)}}
})

8. 使用action的回调函数:

import { defineStore } from 'pinia'export const useUserStore = defineStore({id: 'user',state: () => ({name: '',age: ''}),actions: {async fetchData() {const data = await fetch('https://api.example.com/user')const { name, age } = await data.json()this.name = namethis.age = age}}
})

9. 使用mutation:

import { defineStore } from 'pinia'export const useUserStore = defineStore({id: 'user',state: () => ({name: '',age: ''}),mutations: {setName(name) {this.name = name},setAge(age) {this.age = age}},actions: {fetchData() {fetch('https://api.example.com/user').then((data) => data.json()).then(({ name, age }) => {this.setName(name)this.setAge(age)})}}
})

10. 使用插件扩展Pinia:

import { createPinia } from 'pinia'
import { useCounterStore } from './store'function myPlugin(pinia) {pinia.use((context) => {context.$counter = useCounterStore()})
}const app = createApp(App)app.use(createPinia())
app.use(myPlugin)app.mount('#app')

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法| 差分 No.1】AcWing 797. 差分 AcWing 798. 差分矩阵

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望对大家有所帮…

基于单片机的语音存储与回放系统设计

博主主页&#xff1a;单片机辅导设计 博主简介&#xff1a;专注单片机技术领域和毕业设计项目。 主要内容&#xff1a;毕业设计、简历模板、学习资料、技术咨询。 文章目录 主要介绍一、控制系统设计1.1 系统方案设计1.2 系统工作原理 二、硬件电路设计总电路设计图 三、 软件设…

Android 应用流量监控实践

背景 得物Apm系统本身包含网络接口性能监控的能力&#xff0c;但接口监控主要关注的是接口的耗时、异常率等信息&#xff0c;没有流量消耗相关维度的统计信息&#xff0c;并且一部分流量消耗可能来自于音视频等其他特殊场景&#xff0c;在接口监控的盲区外。 为了了解用户目前…

知识注入以对抗大型语言模型(LLM)的幻觉11.6

知识注入以对抗大型语言模型&#xff08;LLM&#xff09;的幻觉 摘要1 引言2 问题设置和实验2.1 幻觉2.2 生成响应质量 3 结果和讨论3.1 幻觉3.2 生成响应质量 4 结论和未来工作 摘要 大型语言模型&#xff08;LLM&#xff09;内容生成的一个缺点是产生幻觉&#xff0c;即在输…

Java与Redis的集成

目录 Java连接Redis 导入依赖 Redis服务器准备 建立连接 Java操作Redis常用类型数据 Redis字符串(String) Redis哈希(Hash) Redis列表&#xff08;List&#xff09; Redis集合&#xff08;Set&#xff09; Redis有序集合&#xff08;Sorted Set&#xff09; Redis在项目应用…

Bi-TTCOF-Zn助力CO2还原制CO

精确调控氧化还原单元的组分、空间取向或连接模式对于深入了解高效的人工光合整体反应至关重要&#xff0c;但对于异质结构光催化剂而言&#xff0c;还很难实现。 基于此&#xff0c;华南师范大学兰亚乾教授和陈宜法教授等人报道了一系列用于人工光合综合反应的氧化还原分子结…

XShelll-修改快捷键-xftp-修改编辑器

文章目录 1.XShelll-修改快捷键2.Xftp-修改文本编辑器3.总结 1.XShelll-修改快捷键 工具>选项 鼠标键盘&#xff0c;右键编辑&#xff0c;新建快捷键。 复制粘贴改成shiftc,shiftv。更习惯一些。 2.Xftp-修改文本编辑器 xftp修改服务器文件默认的编辑器&#xff0c;是记…

(14)学习笔记:动手深度学习(Pytorch神经网络基础)

文章目录 神经网络的层与块块的基本概念自定义块 问答 神经网络的层与块 块的基本概念 以多层感知机为例&#xff0c; 整个模型接受原始输入&#xff08;特征&#xff09;&#xff0c;生成输出&#xff08;预测&#xff09;&#xff0c; 并包含一些参数&#xff08;所有组成层…

mac电脑系统清理软件CleanMyMac X2024破解版下载

基本上&#xff0c;不管是win版还是Mac版的电脑&#xff0c;其装机必备就是一款电脑系统清理软件&#xff0c;就比如Mac&#xff0c;目前在市面上&#xff0c;电脑系统清理软件是非常多的。 对于不熟悉系统的用户来说&#xff0c;使用一些小众工具&#xff0c;往往很多用户都不…

腾讯云CVM S5服务器4核8G配置性能测评和优惠价格表

腾讯云4核8G服务器CVM标准型S5实例性能测评&#xff0c;包括CPU型号、内存、系统盘、CVM实例规格性能测评&#xff0c;腾讯云4核8G租用优惠价格表&#xff0c;腾讯云服务器网txyfwq.com分享腾讯云4核8G服务器CVM S5性能测评和优惠价格表&#xff1a; 腾讯云4核8G服务器CVM S5性…

C语言之认识柔性数组(flexible array)

在学习之前&#xff0c;我们首先要了解柔性数组是放在结构体当中的&#xff0c;知道这一点&#xff0c;我们就开始今天的学习吧&#xff01; 1.柔性数组的声明 在C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员 这里的结构是结构…

青翼科技-国产化ARM系列TES720D-KIT

板卡概述 TES720D-KIT是专门针对我司TES720D&#xff08;基于复旦微FMQL20S400的全国产化ARM核心板&#xff09;的一套开发套件&#xff0c;它包含1个TES720D核心板&#xff0c;加上一个TES720D-EXT扩展底板。 FMQL20S400是复旦微电子研制的全可编程融合芯片&#xff0c;在单…

element的表单校验正常手机号码以及输入框填写“不详”的情况

element的表单校验正常手机号码以及输入框填写“不详”的情况 <el-col :span"6"><el-form-item label"手机号码" prop"phoneNumber" class"grid-content bg-purple"><el-input v-model"testForm.phoneNumber&quo…

视频编辑软件Corel VideoStudio 会声会影2024中文剪辑使用教程

会声会影&#xff08;Corel VideoStudio&#xff09;2024为加拿大Corel公司发布的一款功能丰富的视频编辑软件。会声会影2023简单易用&#xff0c;具有史无前例的强大功能&#xff0c;拖放式标题、转场、覆叠和滤镜&#xff0c;色彩分级、动态分屏视频和新增强的遮罩创建器&…

虚拟机没有桥接模式--物理机WiFi不见了--注册表修复

我们知道虚拟机有三种模式&#xff1a; vmnet0 桥接模式&#xff1b;vmnet1 仅主机模式&#xff1b;vmnet8 NAT模式 我自己以前一直用的NAT模式&#xff0c;今天突然要用到桥接模式&#xff0c;发现无法切换... 我下面这个是后面弄好了的&#xff0c;最开始是没有显示桥接模式…

k8s提交spark应用消费kafka数据写入elasticsearch7

一、k8s集群环境 k8s 1.23版本&#xff0c;三个节点&#xff0c;容器运行时使用docker。 spark版本时3.3.3 k8s部署单节点的zookeeper、kafka、elasticsearch7 二、spark源码 https://download.csdn.net/download/TT1024167802/88509398 命令行提交方式 /opt/module/spark…

联想服务器-HTTP boot安装Linux系统

HTTP boot与传统PXE的主要差异 HTTP不再需要使用UDP协议的tftp服务&#xff08;连接不可靠、不支持大文件&#xff09;了&#xff0c;只需要dhcp 和http 两个服务即可&#xff0c;支持较稳定的大文件传输。 实验环境 ThinkSystem服务器SR650V2 SR660V2 通过HTTP boot安装Cen…

世界土壤数据库(HWSD)土壤数据集

简介&#xff1a; HWSD&#xff08;Harmonized World Soil Database&#xff09;是联合国粮食及农业组织&#xff08;FAO&#xff09;和国际土壤参考与信息中心&#xff08;ISRIC&#xff09;共同开发的世界土壤数据集。该数据集是一份高分辨率&#xff08;1 km&#xff09;&a…

JUC-3-并发锁

一 JAVA 多线程锁介绍 1 悲观锁 定义&#xff1a;悲观锁指对数据被外界修改持保守态度&#xff0c;认为数据很容易就会被其他线程修改&#xff08;很悲观&#xff09;&#xff0c;所以在数据被处理前先对数据进行加锁&#xff0c;并在整个数据处理过程中&#xff0c;使数据处…

LLM之Prompt(一):5个Prompt高效方法在文心一言3.5的测试对比

在Effective Prompt: 编写高质量Prompt的14个有效方法文中我们了解了14个编写Prompt的方法&#xff08;非常感谢原作者&#xff09;&#xff0c;那么这些Prompt在具体大模型中的效果如何呢&#xff1f;本文以百度文心一言3.5版本大模型在其中5个方法上做个测试对比。 第1条&am…