前端状态管理工具pinia:pinia是什么?相较于Vuex,pinia有什么优势,如何手动添加pinia到Vue3项目中

1.什么是pinia?

Pinia是Vue的最新状态管理工具,是Vuex的替代品。

2.相较于Vuex,pinia有什么优势?

1.提供更加简单的API(去掉了mutation)

倘若你学习过vuex,你一定会发现很多很多不合理的地方,实现一个功能可能要在state定义数据,在mutations中书写更改state数据的方法,在actions中写方法触发mutiaions中的事件,和传值可以说非常的繁琐,而在pinia中只有state,actions,getters三个,去掉了modules和mutations


2.提供符合,组合式风格的API(和 Vue3新语法统一)

3.去掉了 modules 的概念,每一个 store 都是一个独立的模块

4.配合TypeScript 更加友好,提供可靠的类型推断

3.手动添加pinia到Vue3项目中

1.使用Vite创建一个空的Vue3项目

npm create vue@latest

 

2.按照官方文档 安装 pinia到项目中。

pinia官方网:

https://pinia.vuejs.org/zh/index.html

1.下载用包管理器安装 pinia

yarn add pinia
# 或者使用 npm
npm install pinia

2.改动main.js

import { createApp } from 'vue'
//导入pinia
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia=createApp()

// createApp(App).use(pinia).mount('#app')
// 当然上面的是链式的写法也可以下面分开写成:
const app=createApp(App)
app.use(pinia)
app.mount('#app');

//当然这里只是简单演示,一般开发过程中会将pinia专门放到一个文件中,然后导入到main.js中

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【前端】零基础学会编写CSS

一、什么是CSS CSS (Cascading Style Sheets,层叠样式表)是一种是一种用来为结构化文档(如 HTML 文档)添加样式(字体、间距和颜色等)的计算机语言,能够对网页中元素位置的排版进行像素级别的精…

前端练习小项目——方向感应名片

前言:在学习完HTML和CSS之后,我们就可以开始做一些小项目了,本篇文章所讲的小项目为——方向感应名片 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 在开始学习之前,先让我们看一…

卷积神经网络——LeNet——FashionMNIST

目录 一、文件结构二、model.py三、model_train.py四、model_test.py 一、文件结构 二、model.py import torch from torch import nn from torchsummary import summaryclass LeNet(nn.Module):def __init__(self):super(LeNet,self).__init__()self.c1 nn.Conv2d(in_channe…

基于SSM的校园一卡通管理系统的设计与实现

摘 要 本报告全方位、深层次地阐述了校园一卡通管理系统从构思到落地的整个设计与实现历程。此系统凭借前沿的 SSM(Spring、Spring MVC、MyBatis)框架精心打造而成,旨在为学校构建一个兼具高效性、便利性与智能化的一卡通管理服务平台。 该系…

liunx硬盘分区挂载笔记

NAME: 设备名称。 MAJ : 主设备号和次设备号。 RM: 只读标志(0 表示可读写,1 表示只读)。 SIZE: 设备的总大小。 RO: 只读状态(0 表示可读写,1 表示只读)。 TYPE: 设备类型(disk 表示物理磁盘设…

C 语言结构体

由于近期项目需求,需使用到大量的指针与结构体,为更好的完成项目,故对结构体与指针的内容进行回顾,同时撰写本博客,方便后续查阅。 本博客涉及的结构体知识有: 1.0:结构体的创建和使用 2.0: typedef 关…

怎样在 C 语言中进行类型转换?

🍅关注博主🎗️ 带你畅游技术世界,不错过每一次成长机会! 📙C 语言百万年薪修炼课程 通俗易懂,深入浅出,匠心打磨,死磕细节,6年迭代,看过的人都说好。 文章目…

记一次 .NET某上位视觉程序 离奇崩溃分析

一:背景 1. 讲故事 前段时间有位朋友找到我,说他们有一个崩溃的dump让我帮忙看下怎么回事,确实有太多的人在网上找各种故障分析最后联系到了我,还好我一直都是免费分析,不收取任何费用,造福社区。 话不多…

快速读出linux 内核中全局变量

查问题时发现全局变量能读出来会提高效率,于是考虑从怎么读出内核态的全局变量,脚本如下 f open("/proc/kcore", rb) f.seek(4) # skip magic assert f.read(1) b\x02 # 64 位def read_number(bytes):return int.from_bytes(bytes, little,…

每日一练:奇怪的TTL字段(python实现图片操作实战)

打开图片,只有四种数字:127,191,63,255 最大数字为255,想到进制转换 将其均转换为二进制: 发现只有前2位不一样 想着把每个数的前俩位提取出来,组成新的二进制,然后每…

c++ 多边形 xyz 数据 获取 中心点方法,线的中心点取中心值搞定 已解决

有需求需要对。多边形 获取中心点方法&#xff0c;绝大多数都是 puthon和java版本。立体几何学中的知识。 封装函数 point ##########::getCenterOfGravity(std::vector<point> polygon) {if (polygon.size() < 2)return point();auto Area [](point p0, point p1, p…

AI绘画Midijourney操作技巧及变现渠道喂饭式教程!

前言 盘点Midijourney&#xff08;AIGF&#xff09;热门赚米方法&#xff0c;总有一种适合你之AI绘画操作技巧及变现渠道剖析 【表情包制作】 首先我们对表情包制作进行详细的讲解&#xff1a; 当使用 Midjourney&#xff08;AIGF&#xff09; 绘画来制作表情包时&#xff…

ensp防火墙综合实验作业+实验报告

实验目的要求及拓扑图&#xff1a; 我的拓扑&#xff1a; 更改防火墙和交换机&#xff1a; [USG6000V1-GigabitEthernet0/0/0]ip address 192.168.110.5 24 [USG6000V1-GigabitEthernet0/0/0]service-manage all permit [Huawei]vlan batch 10 20 [Huawei]int g0/0/2 [Huawei-…

218.贪心算法:分发糖果(力扣)

核心思想 初始化每个学生的糖果数为1&#xff1a; 确保每个学生至少有一颗糖果。从左到右遍历&#xff1a; 如果当前学生的评分高于前一个学生&#xff0c;则当前学生的糖果数应比前一个学生多一颗。从右到左遍历&#xff1a; 如果当前学生的评分高于后一个学生&#xff0c;则…

排序【选择排序和快速排序】

1.选择排序 1.1基本思想 每次选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在数组的起始位置&#xff0c;直到所有元素都排完。 1.2直接插入排序&#xff1a; 在数组arr[i]到arr[n-1]中选出最大&#xff08;小&#xff09;的元素。若该元素不是数组的…

前端的页面代码

根据老师教的前端页面的知识&#xff0c;加上我也是借鉴了老师上课所说的代码&#xff0c;马马虎虎的写出了页面。如下代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</ti…

小型 FPGA 瞄准 4K 视频接口,MiSTer FPGA 现已支持 Sinden 光枪-FPGA新闻速览

无需矩阵乘法&#xff0c;在 FPGA 上实现低功耗、高性能的 LLM UC Santa Cruz, Soochow University, UC Davis 和 LuxiTech 发表了一篇题为“可扩展的无 MatMul 语言建模”的新技术论文。 “矩阵乘法 (MatMul) 通常占据大型语言模型 (LLM) 总体计算量的主导地位。随着 LLM 扩展…

PLC物联网关在工业自动化领域的应用的意义-天拓四方

随着信息技术的飞速发展&#xff0c;物联网技术正逐步渗透到各个行业领域&#xff0c;其中&#xff0c;工业自动化领域的PLC与物联网的结合&#xff0c;为工业自动化的发展开辟了新的道路。PLC物联网关作为连接PLC与物联网的重要桥梁&#xff0c;其重要性日益凸显。 PLC物联网…

单例模式Singleton

设计模式 23种设计模式 Singleton 所谓类的单例设计模式&#xff0c;就是采取一定的方法保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法。 饿汉式 public class BankTest {public static void main(…

四个“一体化”——构建数智融合时代下的一站式大数据平台

随着智能化技术的飞速发展&#xff0c;尤其是以生成式AI为代表的技术快速应用&#xff0c;推动了数据与智能的深化融合&#xff0c;给数据基础设施带来了新的变革和挑战。如何简化日益复杂的系统架构&#xff0c;提高数据处理效率&#xff0c;降低开发运维成本&#xff0c;促进…