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,一经查实,立即删除!

相关文章

力扣:151. 反转字符串中的单词(Python3)

题目&#xff1a; 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1a;输入字符串 s中可能会存在…

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

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

easypoi 导出Excel 使用总结

easypoi 导出Excel 导出Excel需要设置标题&#xff0c;且标题是多行&#xff0c;标题下面是列表头 设置表格标题 ExportParams headExportParams new ExportParams();StringBuilder buffer new StringBuilder("");buffer.append("1、课程名称&#xff1a;....…

DS图—图非0面积/bfs【数据结构】

DS图—图非0面积 题目描述 编程计算由"1"围成的下列图形的面积。面积计算方法是统计"1"所围成的闭合曲线中"0"点的数目。如图所示&#xff0c;在10*10的二维数组中&#xff0c;"1"围住了15个点&#xff0c;因此面积为15。 提示&…

软考 系统架构设计师系列知识点之数字孪生体(3)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之数字孪生体&#xff08;2&#xff09; 所属章节&#xff1a; 第11章. 未来信息综合技术 第5节. 数字孪生体技术概述 3. 数字孪生体的关键技术 建模、仿真和基于数据融合的数字线程是数字孪生体的三项核心技术。能够做…

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

博主主页&#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;即在输…

1.OpenResty系列之入门简介

OpenResty&#xff08;也称为ngx_openresty&#xff09;是一个基于Nginx的全功能Web应用服务器&#xff0c;它将Nginx与一组附加模块和Lua脚本语言集成在一起&#xff0c;以提供高性能的Web应用程序开发和扩展性。 Nginx是一个轻量级的、高性能的HTTP服务器和反向代理服务器&a…

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在项目应用…

Go语言实现HTTP正向代理

文章目录 前言实现思路代码实现 前言 正向代理&#xff08;Forward Proxy&#xff09;是一种代理服务器的部署方式&#xff0c;它位于客户端和目标服务器之间&#xff0c;代表客户端向目标服务器发送请求。正向代理可以用来隐藏客户端的真实身份&#xff0c;以及在不同网络环境…

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

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

银河麒麟高级服务器操作系统 V10 查看版本

银河麒麟高级服务器操作系统 V10 查看版本_银河麒麟v10查看系统版本_haiyaoyouyou的博客-CSDN博客

RabbitMQ(高级特性)优先级队列

假设在电商系统中有一个订单催付的场景&#xff0c;即客户在一段时间内未付款会给用户推送一条短信提醒&#xff0c;但是系统中分为大型商家和小型商家。比如像苹果&#xff0c;小米这样大商家一年能给我们创造很大的利润&#xff0c;所以在订单量大时&#xff0c;他们的订单必…

记录paddlepaddle-gpu安装

背景 由于最近需要使用paddleocr&#xff0c;因此需要安装依赖paddlepaddle-gpu&#xff0c;不管怎么安装cuda11.6-11.8安装了一遍&#xff0c;都无法正常安装成功。如下所示&#xff1a; 环境&#xff1a;wsl2linux18.04 >>> import paddle >>> paddle.u…

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

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

Pandas指定多列组合形成新列

目录 1、数据准备2、多列组合 1、数据准备 df pd.DataFrame({first_name: [A, B], last_name: [a, b]}) print(df.to_string()) first_name last_name 0 A a 1 B b 2、多列组合 2.1、方式一&#xff1a;使用cat() df[full_name] df[firs…

(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性…