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.rhkb.cn/news/178047.html

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

相关文章

Nginx搭载负载均衡及前端项目部署

目录 ​编辑 一.Nginx安装 1.安装所需依赖 2.下载并解压Nginx安装包 3.安装nginx 4.启动Nginx服务 二.Tomcat负载均衡 1.准备环境 1.1 准备两个Tomcat 1.2 修改端口号 1.3 配置Nginx服务器集群 2.效果展示 ​编辑三.前端项目打包 ​编辑四.前端项目部署 1.上传项目…

Mysql系列 -索引模型数据结构

索引就是排好序的数据结构&#xff0c;可以帮助我们快速的查找到数据&#xff0c;那么底层的数据到底是如何存储的呢&#xff1f; 为什么InnoDB 用的是Btree 存储结构&#xff1f; 大家可以看看这个可视化的网站 数据结构和算法的可视化工具 可以看到数据结构里面有链表&…

Postman接口自动化测试之——批量参数化(参数文件)

Postman接口请求中的参数引用格式&#xff1a;{{参数名}}参数文件只适用于集合中。 创建参数文件 以记事本举例&#xff0c;也可以使用其他编辑器&#xff1b;第一行参数名&#xff0c;用半角逗号&#xff08;英文逗号&#xff09;隔开&#xff0c;第二行为参数值&#xff0c…

Linux -----------------------Shell 流程判断

什么是shell Shell是操作系统的用户界面&#xff0c;负责接收和解释用户的命令&#xff0c;并将这些命令转化为操作系统内部能够理解的指令&#xff0c;然后执行相应的操作。Shell还允许用户编写脚本&#xff0c;以自动化和批处理任务&#xff0c;从而提高效率。在Linux系统中&…

100G QSFP28 BIDI LR1光模块最新解决方案

上期文章我们有介绍到100G QSFP28 BIDI ER1 Lite光模块&#xff0c;本期内容我们将继续为大家介绍100G光模块系列的100G QSFP28 BIDI LR1光模块。这款产品同样也在易天ECOC光通讯展展出&#xff0c;下面跟着小易一起来看看吧&#xff01; 易天光通信的100G QSFP28 BIDI LR1单纤…

Redis中String类型的命令

目录 Redis中的内部编码 redis的数据结构和内部编码 Redis中的String类型 String类型的常见命令 set get mget mset String类型的计数命令 incr incrby decr incrbyfloat 其他命令 append getrange setrange strlen String类型的内部编码 Redis中的内部编码…

【源码】智能导诊系统,通过患者的主诉症状,自动匹配挂号科室和医生

随着计算机技术、网络技术、医院内网、智能终端的发展成熟&#xff0c;自动化、智能化就诊将是未来医院的发展模式。在目前综合性医疗机构&#xff0c;医院建设物庞大且复杂&#xff0c;接待就诊人员数量较大&#xff0c;医院诊疗科室众多&#xff0c;就诊人员容易迷失其中&…

Vue监听事件

一、问题场景 项目有个需求&#xff0c;在登录页面&#xff0c;输入好账号密码后&#xff0c;直接可以点击回车就能够登录&#xff0c;效果和点击登录按钮一样&#xff0c;登录页面源码如下 <template><body id"poster"><el-form class"login-…

linux 下 物理迁移 mysql 数据库 不能启动问题

1、授权问题 # chown -R 777 /app/db/mysql 2、/etc/my.cnf配置问题 [mysqld] basedir/app/db/mysql datadir/app/db/mysql/data socket/app/db/mysql/mysql.sock.lock innodb_buffer_pool_size128M innodb_force_recovery 1 symbolic-links0 [mysqld_safe] log-error/app/…

嵌入式linux常用的文件传输方式

做嵌入式就避免不了移植工作&#xff0c;所谓移植就是将交叉编译生成的可执行程序&#xff0c;库&#xff0c;配置文件等传输到开发板上进行工作。 常用传输方式有以下几种&#xff1a;1.串口传输 就是使用串口传输工具rz/sz; 该工具通过串口传输在SRT串口工具…

软文推广没效果?媒介盒子分享软文优化技巧

虽然软文推广能够为企业实现品牌增值&#xff0c;但也有许多企业在推广过程中犯错导致宣传没有效果&#xff0c;今天媒介盒子就来和大家聊聊企业在进行软文推广中的常见问题以及优化技巧。 问题1&#xff1a;内容生硬无法自然融入品牌信息 这也是企业在软文写作中较常出现的问…

win7中安装node14和vue

下载并安装低版本node 13 到官网去找早期历史版本的 nodejs 13 msi格式即可&#xff0c;并一键安装&#xff0c;我安装在了 D:\Program Files\nodejs 目录下 https://nodejs.org/download/release/v13.14.0/ 下载高版本node 14 下载高版本的node zip包 https://nodejs.org/…

生产环境docke问题排查

查看进程top查看具体的线程 top -H -p 8898如果cpu 过高&#xff0c;就是有问题的地方&#xff1b; 接下来根据docker查看具体的问题 查看dockers容器哪个内存、cpu占用过高 docker stats前言&#xff1a; 有java 启动容器&#xff1b;有jre包启动的容器。如下图 根据cpu很高…

【flink】Task 故障恢复详解以及各重启策略适用场景说明

文章目录 一. 重启策略种类&#xff08;Restart Strategies&#xff09;1. Fixed Delay Restart Strategy2. Failure Rate Restart Strategy3. Fallback Restart Strategy4. No Restart Strategy 二. 故障恢复策略&#xff08;Failover Strategies&#xff09;1. &#xff08;全…

【pdf密码】PDF没有密码,为什么不能编辑?

打开PDF文件的时候&#xff0c;没有提示带有密码&#xff0c;但是打开文件之后发现没有办法编辑PDF文件&#xff0c;这个是因为PDF文件设置了限制编辑&#xff0c;我们需要将限制取消才能够编辑文件。 那么&#xff0c;我们应该如何取消密码&#xff0c;编辑文件呢&#xff1f…

如何在校园跑腿系统小程序中构建稳健的订单处理与分配系统?

1. 数据库设计 首先&#xff0c;设计订单数据结构。使用数据库&#xff08;例如MySQL、MongoDB等&#xff09;&#xff0c;创建订单表以存储订单相关信息&#xff0c;包括订单ID、用户信息、交付地址、订单状态等。 CREATE TABLE orders (order_id INT AUTO_INCREMENT PRIMAR…

02【保姆级】-GO语言开发注意事项(特色重点)

02【保姆级】-GO语言开发注意事项&#xff08;特色重点&#xff09; 一、Go语言的特性1.1 第一个hello word&#xff08;详解&#xff09;1.2 开发编译。&#xff08;重要点 / 面试题&#xff09;1.3 开发注意事项1.4 GO语言的转义字符1.5 注释1.6 API 文档 之前我学过C、Java、…

Nginx代理转发请求POST变GET请求问题

&#x1f680; 注重版权&#xff0c;转载请注明原作者和原文链接 &#x1f96d; 作者&#xff1a;Yuan-Programmer &#x1f34e; 个人博客&#xff1a;https://boke.open-yuan.com &#x1f349; 已经替换了新的域名&#xff0c;总站叫做&#xff1a;OpenYuan开袁网&#xff0…

EASYX实现多物体运动

eg1:单个物体运动使用easyx实现单个小球的运动 #include <stdio.h> #include <easyx.h> #include <iostream> #include <math.h> #include <stdlib.h> #include <conio.h> #include <time.h> #define PI 3.14 #define NODE_WIDTH 4…

设计融合_ c#

单例模式 using System; namespace DesignIntegration{ public class TimeManager{ private static TimeManager _instance; private static readonly Object locker new Object(); private TimeManager() { } public static TimeManager…