vue全局状态管理工具 Pinia 的使用

news2024/10/1 3:24:22

        先了解一下关于Pinia的一些故事,面试把这些讲给面试官挺加分的,同时这是我持续学习下去的动力

        1.为什么叫Pinia?

        官网解释是西班牙语中的 pineapple,即“菠萝”,菠萝花是一组各自独立的花朵,它们结合在一起,形成一个多重的水果。 与 Store 类似,每一个都是独立诞生的,最终它们都是相互联系的。 它(菠萝)也是一种原产于南美洲的美味热带水果。

        2.Pinia有什么作用?

        与vuex的作用一样,用于全局共享数据。其实Pinia就是起源于vuex的一次更新,Pinia 于 2019 年 11 月左右的一次实验,其目的是设计一个拥有组合式api的 vue 状态管理库,就是说在vuex中可以写vue3的代码。结合了 vuex 5的大部分功能,所以决定将其作为新的推荐方案来代替 vuex。也就是可以说Pinia就是vuex5版本。 

        3.安装,在项目的终端输入:

npm install pinia

        4.main.js配置

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

        5.stores仓库,在src目录下创建stores文件夹,里面存放对仓库的管理操作

         6.counter.js仓库,因为我实现的这个功能是让数字加,所以就命名了counter:

//这里就使用vue3的写法,虽然pinia也可以像写vuex一样写state、actions、mutations等等,但pinia主要还是面向vue3

import { defineStore } from 'pinia' //引入
import { ref, reactive } from "vue" //引入组合式api
import { useRouter } from "vue-router"

//可以对 `defineStore()` 的返回值进行任意命名,但最好使用 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`,`useCartStore`,`useProductStore`)
//defineStore()的第一个参数一定要是项目中唯一的名称
export const useCounter = defineStore('counter', () => {
    let num = ref(0) //这个num就是此仓库中的响应式数据

    const addNum = () =>{ //addNum就是此仓库的方法
        num.value = num.value+1;
    }

    return { num,addNum } //一定要return!不然其他地方用不到
})

         7.在about页面使用counter仓库:

<script setup>
import {useCounter} from "@/stores/counter.js" //引入useCounter仓库
//接收return的返回值,里面就包含num变量和addNum方法,num展示到页面,点击按钮调用addNum方法
const store = useCounter();    
</script>

<template>
  <div class="about">
    <h1>{{store.num}}</h1>
    <button @click="store.addNum">num++</button>
  </div>
</template>

<style>
</style>

        8.效果:点击按钮页面数字会跟着变化,成功

        Pinia确实比vuex方便了很多,它不需要受到action和mutation的限制,可以直接对仓库中的数据进行读写我感觉Pinia与Vuex的关系就像是Vue3和Vue2的关系

        Pinia官网:Pinia | The intuitive store for Vue.js

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

王道考研数据结构--4.1.顺序队列

目录 前言 1.顺序队列的定义 2. 顺序队列的结构 3.顺序队列的操作 3.1定义顺序队列 3.2初始化 3.3入队 3.4出队 3.5遍历求表长 3.6清空&#xff0c;销毁队列 4.完整代码 前言 日期&#xff1a;2023.7.25 书籍&#xff1a;2024年数据结构考研复习指导&#xff08;王道…

从小白到大神之路之学习运维第67天-------Tomcat应用服务 WEB服务

第三阶段基础 时 间&#xff1a;2023年7月25日 参加人&#xff1a;全班人员 内 容&#xff1a; Tomcat应用服务 WEB服务 目录 一、中间件产品介绍 二、Tomcat软件简介 三、Tomcat应用场景 四、安装配置Tomcat 五、配置目录及文件说明 &#xff08;一&#xff09;to…

pcie

pcie有两层意思&#xff1a;一层是总线&#xff0c;一层是接口。 下面说的是pcie接口&#xff0c;也就是插槽 一、PCI-E插槽有何作用&#xff1f; 作用是连接显卡、独立声卡、独立网卡、USB 3.0/3.1接口扩展卡、RAID阵列卡、PCI-E SSD等设备。 二、PCI-E插槽分类 PCI-E x1/x2…

ansible自动化运维

&#x1f618;作者简介&#xff1a;正在努力的99年公司职员。 &#x1f44a;宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。 &#x1f64f;创作不易&#xff0c;…

加速生成nlp分类任务的数据(voc t voc)

例如 ABCD 生成A01B B01C A02C A03D。。。。。。。。。 from multiprocessing import Process, Manager, freeze_supportdef gen_data(i,d,d_list,data):for j,dj in enumerate(data[i1:]):# print(d,str(j1).zfill(15),dj)d_list.append([d,str(j1),dj])if __name__ __main…

STM32MP157驱动开发——按键驱动(休眠与唤醒)

文章目录 “休眠-唤醒”机制&#xff1a;APP执行过程内核函数休眠函数唤醒函数 休眠与唤醒方式的按键驱动程序(stm32mp157)驱动程序框架button_test.cgpio_key_drv.cMakefile修改设备树文件编译测试 “休眠-唤醒”机制&#xff1a; 当应用程序必须等待某个事件发生&#xff0c…

docker - 学习笔记

一、简介 1.1 相关地址 Docker是基于Go语言开发的官网&#xff1a;https://www.docker.com/官方文档&#xff1a;https://docs.docker.com/仓库地址&#xff1a;https://hub.docker.com/ 1.2 虚拟化技术和容器化技术对比 1.2.1 虚拟化技术的缺点 资源占用十分多冗余步骤多启…

vue 中断请求

1 背景&#xff1a;针对一些请求时间较长&#xff0c;组件销毁后即中断请求&#xff1b; 2 方法&#xff1a; data(){return {//用于取消请求abortController:new AbortController(), } }, created(){//请求接口this.groundAcquisition(); }, beforeDestroy(){//中断请求this.…

网安高级笔记1

html实体编码 HTML实体编码&#xff0c;格式 以&符号开头&#xff0c;以;分号结尾的 HTML 中的预留字符必须被替换为字符实体 在 HTML 中不能使用小于号&#xff08;<&#xff09;和大于号&#xff08;>&#xff09;&#xff0c;这是因为浏览器会误认为它们是…

Python内置函数系统学习(2)——数据转换与计算(详细语法参考 + 参数说明 + 具体示例),详解max()函数实例 | 编程实现当前内存使用情况的监控

才识是岁月的冠冕&#xff0c;正如思念是我们共同的时光。 【Neo4j Python】基于知识图谱的电影问答系统&#xff08;含问题记录与解决&#xff09;附&#xff1a;源代码&#xff08;含Bug解决&#xff09;【Neo4j 知识图谱】图形化数据库基本操作: 创建节点与关系、添加属性…

了解Unity编辑器之组件篇Scripts(六)

Scripts&#xff1a;有Unity提供的一些脚本插件&#xff08;自己新建的脚本也会出现在里面&#xff09; 一、TMPro&#xff1a;有一些与文字显示和排版相关的脚本 1.TextContainer&#xff08;文本容器&#xff09;&#xff1a;TextContainer 是一个内容框&#xff0c;用于定…

5分钟掌握接口自动化测试,4个知识点简单易学!

一. 什么是接口测试 接口测试是一种软件测试方法&#xff0c;用于验证不同软件组件之间的通信接口是否按预期工作。在接口测试中&#xff0c;测试人员会发送请求并检查接收到的响应&#xff0c;以确保接口在不同场景下都能正常工作。 就工具而言&#xff0c;常见的测试工具有…

代码随想录-108-背包问题

目录 前言思路3. 算法实现4. 算法坑点 前言 我在刷卡哥的“代码随想录”&#xff0c;自己的总结笔记均会放在“算法刷题-代码随想录”该专栏下。 代码随想录此题链接 思路 前提&#xff0c;当前的物品有i1个&#xff0c;编号为0~i&#xff0c;重量weight和价值value数组如下…

FreeRTOS(软件定时器)

一、什么是定时器 简单可以理解为闹钟&#xff0c;到达指定一段时间后&#xff0c;就会响铃。 STM32 芯片自带硬件定时器&#xff0c;精度较高&#xff0c;达到定时时间后会触发中断&#xff0c;也可以生成 PWM 、输入 捕获、输出比较&#xff0c;等等&#xff0c;功能强大&am…

springMVC--中文乱码处理(新思路--化繁为简)

文章目录 springMVC--中文乱码处理(新思路--化繁为简)编码过滤器自定义中文乱码过滤器举例应用实例1. 创建过滤器springmvc\src\com\web\filter\MyCharacterFilter.java实现思路 2. 配置web.xml完成测试 Spring MVC--过滤器处理中文修改web.xml完成测试 springMVC–中文乱码处理…

Go语言导入本地文件包

Go语言导入本地文件包 ​ 在Go程序中&#xff0c;每一个包通过称为**导入路径&#xff08;import path&#xff09;**的唯一字符串来标识。它们出现在import声明中&#xff0c; 一个导入路径标注一个目录&#xff0c;目录中包含构成包的一个或多个Go源文件。 举例&#xff1a;…

数据库应用:Redis主从复制、哨兵、cluster集群

目录 一、理论 1.Redis高可用 2.Redis主从复制 3.部署Redis主从复制 4.Redis哨兵模式 5.部署Redis哨兵模式 6.Redis集群模式 7.部署Redis集群 二、实验 1.部署Redis主从复制 2.部署Redis哨兵模式 3.部署Redis集群 三、问题 1.开启Redis群集失败 四、总结 一、理…

HTML5+CSS3+JS小实例:翻滚吧乔巴自定义滑块控件

实例:翻滚吧乔巴自定义滑块控件 技术栈:HTML+CSS+JS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" cont…

Docker 安装 Nacos

简介 Nacos 是一个轻量级的服务发现、配置管理和服务管理平台&#xff0c;它支持多种语言&#xff08;Java、Go、Node.js 等&#xff09;和多种协议&#xff08;HTTP、gRPC、DNS 等&#xff09;&#xff0c;能够帮助开发者构建微服务体系结构&#xff0c;简化了应用程序在不同…

入门前端监控

背景 前端监控是指通过一系列手段对Web页面或应用程序进行实时监控和数据采集&#xff0c;以了解页面或应用程序的性能状况、用户行为等等&#xff0c;并及时发现和解决潜在的问题。一个完整的前端监控平台可以包括&#xff1a;数据收集与上报、数据整理与存储、数据展示这里仅…