Pinia最简单使用(vite+vue3)
文章目录
- 创建项目·
- 安装Pinia包
- main.js注册Pinia
- 在src下创建store/store.js文件,放入以下内容
- 在app.vue中的使用(在其他组件也一样的)
创建项目·
npm create vite@latest my-vue-app选vue
选JavaScript
cd my-vue-app
npm install
npm run dev
安装Pinia包
npm install pinia
main.js注册Pinia
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from "pinia";
const app = createApp(App)
const pinia = createPinia();
app.use(pinia).mount('#app');
在src下创建store/store.js文件,放入以下内容
import { defineStore } from "pinia";
// 导出方法(每个方法对应一个模块,相当于vuex的模块化,引入组件时按需引入)
export const xj = defineStore("main", {state: () => {return {name: "萧寂",age: 22,sex: "男",};},getters: {},actions: {},
});
在app.vue中的使用(在其他组件也一样的)
<script setup>
//解构出store.js内的需要的方法(每个方法对应一个模块,相当于vuex的模块化)
import { xj } from "./store/store";//将数据变成响应式的方法
import { storeToRefs } from "pinia";// 调用解构出来的方法
const store = xj();//将store内的属性变成响应式的
storeToRefs(store);
//也可以(二者使用方式等价)
// const {name,age} = storeToRefs(store); //此时的name和age也是响应式的,但和ref不同,修改name或者age需要用store调用,如store.name=''//修改数据
const changeName = () => {store.name = "张三";
};//还原/重置所有数据
const reasetName = () => {store.$reset();
};
const reasetName2 = () => {// 这种重置相当于赋初始值操作,比较麻烦,推荐使用方式一store.name = "萧寂";store.age = 22;store.sex = "男";
};//批量修改数据
const pathStore = () => {store.$patch({name: "小红",age: 100,sex: "女",});
};const pathStore2 = () => {// 这种批量修改相当于赋值操作, 比较麻烦,推荐使用方式一store.name = "萧寂哈哈哈哈";store.age = 50;store.sex = "女";
};const piniaData = () => {console.log(store.name);console.log(store.age);console.log(store.sex);
};
</script><template><!-- 获取pinia的数据 --><div>姓名:{{ store.name }}</div><div>年龄: {{ store.age }}</div><div>性别: {{ store.sex }}</div><button @click="changeName">只更改姓名</button><button @click="reasetName">重置所有(方法一)</button><button @click="reasetName2">重置所有(方法二)</button><button @click="pathStore">批量修改数据(方式一)</button><button @click="pathStore2">批量修改数据(方式二)</button><button @click="piniaData">在js里面打印当前数据</button>
</template><style scoped lang="scss"></style>
接下来直接运行就好,我个人就比较喜欢直接使用赋值,直接修改这种,并且支持重置和批量修改,这里并未讲到关于pinia的方法使用,如getters和actions配置,因为我个人目前还没用到这种场景,只用到了全局数据,这里就只讲到了最简单使用就上面的取值,赋值,重置,批量修改,在js中打印数据,我目前只用到了这些,如果需要其他更详细的,来我博客找详细的pinia笔记去看
相关文章:
Pinia最简单使用(vite+vue3)
文章目录 创建项目安装Pinia包main.js注册Pinia在src下创建store/store.js文件,放入以下内容在app.vue中的使用(在其他组件也一样的) 创建项目 npm create vitelatest my-vue-app选vue 选JavaScript cd my-vue-app npm install npm run dev安装Pinia包 npm install piniamain…...
计算机网络——期末复习(4)协议或技术汇总、思维导图
思维导图 协议与技术 物理层通信协议:曼彻斯特编码链路层通信协议:CSMA/CD (1)停止-等待协议(属于自动请求重传ARQ协议):确认、否认、重传、超时重传、 (2)回退N帧协…...
Microsoft word@【标题样式】应用不生效(主要表现为在导航窗格不显示)
背景 随笔。Microsoft word 2013基础使用,仅做参考和积累。 问题 Microsoft word 2013,对段落标题文字应用【标题样式】不生效(主要表现为在导航窗格不显示)。 图1 图2 观察图1和图2,发现图1的文字在应用【标题一】样…...
轮播图带详情插件、uniApp插件
超级好用的轮播图 介绍访问地址参数介绍使用方法(简单使用,参数结构点击链接查看详情)图片展示 介绍 带有底部物品介绍以及价格的轮播图组件,持续维护,uniApp插件,直接下载填充数据就可以在项目里面使用 …...
云计算时代携程的网络架构变迁
大家觉得有意义和帮助记得及时关注和点赞!!! 前言0 携程云平台简介 网络演进时间线1 基于 VLAN 的二层网络 1.1 需求1.2 解决方案:OpenStack Provider Network 模型1.3 硬件网络拓扑1.4 宿主机内部网络拓扑1.5 小结 优点缺点2 基于 SDN 的大二层网络 2.1 面临的新问…...
USB 状态机及状态转换
文章目录 USB 状态机及状态转换连接状态供电状态默认状态地址状态配置状态挂起状态USB 状态机及状态转换 枚举完成之前,USB 设备要经过一系列的状态变化,才能最终完成枚举。这些状态是 连接状态 - attached供电状态 - powered默认状态 - default地址状态 - address配置状态 -…...
Go C编程 第6课 无人机 --- 计算旋转角
旋转的秘密---认识角度 rt、lt命令学习 goc电子课程 一、编程步骤 第一步 第二步 第三步 第四步 二、画“四轴无人机” (一)、画第一根机轴 (二)、画第二根机轴 (三)、画完整的无人机 三、画“多轴无人…...
C++-----图
一、图的结构 在 C 中,图可以用多种结构表示,常见的有邻接矩阵和邻接表。 邻接矩阵 使用二维数组 adjMatrix 来表示图中顶点之间的连接关系。对于无向图,如果 adjMatrix[i][j] 不为零,则表示顶点 i 和顶点 j 之间存在边&#x…...
mysql 数据库迁移到达梦数据库
1.windows安装达梦数据库,去官网下载 dm8 进行安装,安装后,可以使用管理工具管理数据 使用迁移工具对数据进行迁移; 2.使用php 或者 thinkphp连接达梦数据库 2.1、先PHP开启DM扩展 从达梦数据库安装目录下drivers/php_pdo 复制对…...
【记录】使用R2 CDN替换本地项目图片以加速图片加载
将图片存储到 Cloudflare 的存储桶中,并通过其提供的公共 URL 来替换代码中的本地路径,可以减小项目中打包的图片文件体积 实现方法的详细步骤: 1. 上传图片到 Cloudflare 的存储桶 (1)登录 Cloudflare Dashboard&am…...
12.13[java exp4][debug]nginx 500,究极未解之谜,出自重启,解决自重启,迷???
pro1 pro2?????????未解之谜,究极未解之谜???? 就是 auth_request http://auth_server/auth/check;接受不到,auth_server无法受到请求,就完全没收到?但是/auth/login等直接…...
Disruptor 高性能环形消息框架
官方文档:Disruptor 1. 简介 Disruptor是一个高性能的互进程(Inter-process)和多线程(Multi-threaded)消息处理库,由LMAX交易所开发,用于在Java虚拟机(JVM)上实现高性能…...
Python列表(二)
方式三: 创建对应的枚举对象 概念:通过枚举函数,生成一个新的对象 作用:函数用于将一个可遍历的数据对象(如列表、元组或字符串)组合为一个索引序列 同时列出数据下标和数据 #生成枚举对象 values [&…...
计算机网络:应用层 —— 网络应用模式
文章目录 客户—服务器方式和对等方式客户/服务器方式 (C/S方式)工作流程特点 对等方式 (P2P方式)工作流程P2P 应用特点 客户—服务器方式和对等方式 网络应用程序运行在处于网络边缘的不同的端系统上,通过彼此间的通信来共同完成某项任务。 开发一种新的网络应用…...
@Repository注解和@mapper的区别
1. Repository 注解 通俗解释: 你可以把 Repository 注解想象成是一个专门负责管理数据库操作的 “仓库管理员”。这个管理员主要负责和数据库打交道,就像管理一个大仓库一样,他会进行各种操作,比如把货物(数据&#x…...
解锁成长密码:探寻刻意练习之道
刻意练习,真有那么神? 在生活中,你是否有过这样的困惑:每天苦练英语口语,可一到交流时还是支支吾吾;埋头苦学吉他,却总是卡在几个和弦转换上;工作多年,业务能力却似乎陷入…...
cuda-cuDnn
cuda sudo /bin/sh cuda_11.7.0_515.43.04_linux.run cudnn cuDNN Archive | NVIDIA Developer Linux 系统 CUDA 多版本共存以及切换 – 颢天 安装cuda # 如果已经安装过驱动,驱动不需要再安装,取消勾选 安装cuDNN,cuda-cuDNN对应关系见…...
如何使用Python和PIL库生成带竖排文字的封面图像
在今天的博客中,我们将学习如何使用Python和PIL(Pillow)库生成一个简单而有创意的封面图像。我们将创建一个背景图像,并在其上绘制带有竖排文字的标题和副标题,最后再添加一些装饰性元素如星星和萤火虫。这个教程适合初…...
低代码开发 实战转型案例一览
数字浪潮澎湃,企业应用开发需求呈井喷之势。传统全栈开发虽底蕴深厚,然其漫长周期与高昂成本,难以追赶市场快速交付的急切步伐。无代码与低代码平台顺势崛起,宛如暗夜明灯,吸引非技术人员纷至沓来,投身应用…...
SQL Server中FIRST_VALUE和 LAST_VALUE窗口函数允许在一个指定的窗口内返回第一个或最后一个值
在 SQL Server 中,FIRST_VALUE 和 LAST_VALUE 是用于窗口函数(Window Functions)的两个非常有用的函数。它们允许你在一个指定的窗口内返回第一个或最后一个值。这两个函数通常与 OVER 子句一起使用,以定义窗口的范围和排序规则。…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
