Pinia的十个简答小案例

2023-11-02 17:20
文章标签 案例 十个 pinia 简答

本文主要是介绍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')

这篇关于Pinia的十个简答小案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/332115

相关文章

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名,员

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1:查询所有有库存的商品信息案例2:使用EX

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、