Vue3-Pinia状态管理器

Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以,但如果应用在服务器端渲染,这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia,即使在小型单页应用中,你也可以获得如下功能:

  • Devtools 支持
    • 追踪 actions、mutations 的时间线
    • 在组件中展示它们所用到的 Store
    • 让调试更容易的 Time travel
  • 热更新
    • 不必重载页面即可修改 Store
    • 开发时可保持当前的 State
  • 插件:可通过插件扩展 Pinia 功能
  • 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
  • 支持服务端渲染

快速上手

第一步:`npm install pinia`

第二步:操作`src/main.ts`

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

存储+读取数据

1. `Store`是一个保存:**状态**、**业务逻辑** 的实体,每个组件都可以**读取**、**写入**它。

2. 它有三个概念:`state`、`getter`、`action`,相当于组件中的: `data`、 `computed` 和 `methods`。

3. 具体编码:`src/store/count.ts`

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算,类似于计算属性getters:{}
})

组件中使用state中的数据

<template><h2>当前求和为:{{ sumStore.sum }}</h2>
</template><script setup lang="ts" name="Count">// 引入对应的useXxxxxStore	import {useSumStore} from '@/store/sum'// 调用useXxxxxStore得到对应的storeconst sumStore = useSumStore()
</script>

修改数据

直接修改

countStore.sum = 666

批量修改

countStore.$patch({sum:999,school:'atguigu'
})

使用方法修改

import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//减decrement(value:number){if(this.sum > 1){this.sum -= value}}},/*************/
})
// 使用countStore
const countStore = useCountStore()// 调用对应action
countStore.incrementOdd(n.value)

storeToRefs

  • 借助storeToRefsstore中的数据转为ref对象,方便在模板中使用。

  • 注意:pinia提供的storeToRefs只会将数据做转换,而VuetoRefs会转换store中数据。

<template><div class="count"><h2>当前求和为:{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore,随后解构 */const {sum} = storeToRefs(countStore)
</script>

getters

    1. 概念:当`state`中的数据,需要经过处理后再使用时,可以使用`getters`配置。

    2. 追加```getters```配置。

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'atguigu'}},// 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
})

组件中读取数据

const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

$subscribe

通过 store 的 `$subscribe()` 方法侦听 `state` 及其变化,觉得有点像watch

talkStore.$subscribe((mutate,state)=>{console.log('LoveTalk',mutate,state)localStorage.setItem('talk',JSON.stringify(talkList.value))
})

store组合式写法

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求,下面这行的写法是:连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串,包装成一个对象let obj = {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}
})

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

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

相关文章

OVF(Open Virtualization Format)或OVA(Open Virtual Appliance)格式有什么区别

OVF&#xff08;Open Virtualization Format&#xff09;和OVA&#xff08;Open Virtual Appliance&#xff09;是两种不同的文件格式&#xff0c;它们都是用于虚拟机的打包和交换的开放标准。以下是它们之间的主要区别&#xff1a; 1. **OVF&#xff08;Open Virtualization …

Ant-Design-Vue动态表头并填充数据

Ant-Design-Vue动态表头并填充数据 Ant-Design-Vue 是一个基于 Vue.js 的前端UI框架&#xff0c;它继承了 Ant Design 的优秀设计理念&#xff0c;并针对 Vue.js 进行了深度优化。在实际开发过程中&#xff0c;我们经常需要处理各种复杂的表格数据&#xff0c;而 Ant-Design-V…

Renesas MCU之使用Keil搭建开发环境

目录 概述 1 软件安装 1.1 软件版本信息 1.2 安装FSP 1.3 安装和配置Keil 2 使用FSP创建工程 2.1 FSP中配置参数 2.2 配置板卡硬件资源 3 Keil中配置项目 3.1 在Keil配置FSP 3.2 添加user src目录 3.3 配置下载项 3.4 测试下载功能 4 使用stm32 NUCLEO板卡的ST-L…

elementplu父级页面怎么使用封装子组件原组件的方法

一、使用原因&#xff1a; 封装了el-table&#xff0c;表格中有多选&#xff0c;父级要根据指定状态&#xff0c;让其选择不上&#xff0c;需要用到elementplus中table原方法toggleRowSelection 附加小知识点&#xff1a;&#xff08;el-tree刷新树后之前选中的保持高亮setCurr…

前端面试宝典总结3-JavaScript(2)

前端面试宝典总结之JavaScript&#xff08;2&#xff09; 本文章 对各大学习技术论坛知识点&#xff0c;进行总结、归纳自用学习&#xff0c;共勉&#x1f64f; 上一篇&#x1f449;: 前端面试宝典总结3-JavaScript&#xff08;1&#xff09; 文章目录 前端面试宝典总结之Ja…

11.6 归并排序

目录 11.6 归并排序 11.6.1 算法流程 11.6.2 算法特性 11.6.3 链表排序 11.6 归并排序 归并排序&#xff08;merge sort&#xff09;是一种基于分治策略的排序算法&#xff0c;包含图 11-10 所示的“划分”和“合并”阶段。 划分阶段&#xff1a;通过递归不断地…

雷池WAF-动态防护新功能体验

雷池WAF 雷池WAF&#xff08;Web Application Firewall&#xff0c;网络应用防火墙&#xff09;是由长亭科技开发的一个网络安全产品&#xff0c;它专注于保护Web应用免受黑客攻击。 今天主要讲的是长亭雷池最近新出的功能&#xff1a;动态防护 安装 雷池WAF支持多种安装方式…

Activiti7 Maven笔记

通过maven完成BPMN的创建,定义流程,部署流程,完成流程等操作 代码整合创建maven项目添加log4j日志配置添加activiti配置文件创建数据库 activitijava类编写程序生成表如果代码运行,没有生成表,可能是没有读取到activiti的配置文件 Activiti数据表介绍类关系图工作流引擎创建默认…

禁止某个网段访问网络

禁用攻击 改成桥接模式 nmtui&#xff0c;改手动&#xff0c;清ip虚拟网络编辑器改成桥接模式. 安装arpspoof工具 先试着运行arpspoof如果不成功&#xff0c;更新源apt-get update接着运行arpspoof/apt install dsniff成功后&#xff0c;看arpspoof颜色是否是蓝色 禁止某个…

【视频转码】ZLMediaKit漏洞报告的问题

漏洞问题&#xff1a; 支持ss1 rc4密码套件(bar mitzvah) 漏洞级别&#xff1a; 中危 漏洞修复&#xff1a; 方法&#xff1a;避免使用RC4密码&#xff0c;参考代码如下&#xff1a; 修改文件位于&#xff1a;webrtc/DtlsTransport.cpp ret SSL_CTX_set_cipher_list(ssl…

Windows主机信息收集

一、内网环境分析 1、什么是内网渗透 内网渗透: ①在拿到webshell的时候&#xff0c;想办法获得系统信息拿到系统权限&#xff0c;进入到网络系统内部之后收集内部 网络的各种信息&#xff0c;获取内部网络有价值的人员、资产信息。 ②内网渗透的第一步&#xff0c;内网信…

嵌入式linux中线程编程实现详解

大家好,今天主要给大家分享一下,线程的使用,通过具体的实例代码来说明一个线程创建到退出到回收的基本流程,后半部分则会通过实例来说明如何能够控制好线程,从临界资源访问与线程的执行顺序控制上引出互斥锁、信号量的概念与使用方法。 第一:为什么要使用线程 场景分析:…

三.三Vue 实现的精彩动画效果

在 Vue 开发中&#xff0c;我们可以利用<transition>组件来打造各种令人惊艳的动画效果。下面来详细看看这些有趣的动画效果及其实现代码。 一、缩放类效果 zoom-in&#xff08;整体放大进入&#xff09; <template><div><button click"isShow ! …

[数据集][目标检测]电力工地场景下的人头检测数据集VOC+YOLO格式7035张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;7035 标注数量(xml文件个数)&#xff1a;7035 标注数量(txt文件个数)&#xff1a;7035 标注…

Dockershim 与 Containerd:两种容器运行时的故事

在不断发展的容器化世界中&#xff0c;两个关键组件经常被混淆&#xff1a;Dockershim 和 containerd。虽然它们在管理容器方面都发挥着重要作用&#xff0c;但它们的用途却截然不同。本文深入探讨了它们的功能&#xff0c;深入探讨了 Dockershim 和 containerd 之间的区别。 揭…

SpringBoot——全局异常处理

目录 异常 项目总结 新建一个SpringBoot项目 pom.xml Result&#xff08;通用的响应结果类&#xff09; MyBusinessException自定义异常类 GlobalExceptionHandler全局异常处理类 ExceptionController控制器 SpringbootExceptionApplication启动类 参考文章&#xff1a…

对比投入高成本自研推广系统,直接采用SaaS更有效益

推广分销作为一种有效的市场拓展方式&#xff0c;被越来越多的企业所采纳。部分企业会选择投入资源自研一套推广分销系统&#xff0c;但是其实最后发现几年过去了&#xff0c;投入了大量成本&#xff0c;系统仍然是一地鸡毛&#xff0c;还在定义一些基本的属性。 自研推广系统…

Web前端三大主流框架:Angular、React与Vue.js的深入探讨

在快速发展的Web前端领域&#xff0c;选择一款合适的框架对于提升开发效率、保证代码质量以及实现项目目标具有至关重要的作用。在众多前端框架中&#xff0c;Angular、React和Vue.js以其独特的优势和广泛的应用场景&#xff0c;成为了市场上的三大主流框架。本文将深入剖析这三…

08-使用HappyPack提升Webpack构建速度

使用HappyPack提升Webpack构建速度 笔记分享 在前端开发中&#xff0c;Webpack 是一种非常流行的模块打包工具。然而&#xff0c;随着项目规模的扩大和复杂度的增加&#xff0c;Webpack 的构建速度可能会成为一个瓶颈。为了提升构建速度&#xff0c;我们可以使用一些工具和优化…

基于4G工业路由器的信息发布系统物联网应用方案

随着物联网技术的快速发展&#xff0c;智能信息发布系统已成为城市管理和信息传播的重要工具。而4G工业路由器作为连接信息发布终端与云平台的关键设备&#xff0c;其在提升信息发布效率方面发挥着至关重要的作用。为了提升智能信息发布系统的效率和智能化水平&#xff0c;智联…