当前位置: 首页 > news >正文

vue3第四十节(pinia的用法注意事项解构store)

pinia 主要包括以下五部分,经常用到的是 store、state、getters、actions

在这里插入图片描述
以下使用说明,注意事项,仅限于 vue3 setup 语法糖中使用,若使用选项式 API 请直接查看官方文档:

一、前言:

pinia 是为了探索 vuex 下一次迭代是要实现那些功能用途,pinia 已实现vuex5 的绝大部分功能;
并且与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持;

二、pinia 与vuex <= 4.x 的差异

1、****mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成,但这不再是问题。
**2、**无需创建自定义复杂包装器来支持 TypeScript,所有内容都是类型化的,并且 API 的设计方式尽可能利用 TS 类型推断。
**3、**不再需要注入、导入函数、调用函数、享受自动完成功能
4、****无需动态添加 Store,默认情况下它们都是动态的,您甚至都不会注意到。请注意,您仍然可以随时手动使用 Store 进行注册,但因为它是自动的,您无需担心。
**5、**不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store,但 Pinia 通过设计提供平面结构,同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
**6、**没有 命名空间模块。鉴于 Store 的扁平架构,“命名空间” Store 是其定义方式所固有的,您可以说所有 Store 都是命名空间的。

三、store:

store:它持有未绑定到您的组件树的状态和业务逻辑托管全局状态
像一个始终存在并且每个人都可以读取和写入的组件;
主要有三个方法:state、getters、actions,类似于组件中数据、计算属性、方法
用于存储不同组件直接共享的数据实例方法,以及页面之间需要保留的数据状态;

// count.ts 文件
<script lang="ts">
import { defineStore } from 'pinia'
// defineStore 的第一个参数是 唯一标识ID 用于关联 devtool 调试使用
// 第二个参数是 一个对象 包含 state、actions,gettes
// 声明的 属性useCount  建议以 use 开头,保持书写的统一性
export const useCount = defineStore('count', {state:() => {return{}},actions: {},gettes: {}
})
</script>

在组件中使用:
注意:若 解构使用 store 中的属性 方法,需要使用 storeToRefs() 或者 toRefs() 让其保持响应式

<script setup>import { toRefs } from 'vue'import { storeToRefs } from 'pinia'import { useCount } from '@/store'const count = useCount()// 这样解构获取 store 中属性方法,会丢失响应式const { num } = count// 1、使用 pinia自带的storeToRefs(), 将store中属性转换为 ref 数据以保持响应式const { doubleCountAdd } = storeToRefs(count)console.log('=doubleCountAdd==', doubleCountAdd)// 2、使用vue3 的 toRefs() 转化为 ref 响应式数据const { doubleCount }  = toRefs(count)console.log('=doubleCount==', doubleCount)
</script>

四、state:

state: 类似组件中的 data(){return{}},但是在 pinia 中的state 建议书写为:
使用箭头函数,用于完整推断类型

state: () => {return {name: 'Andy',num: 0}
}

组件中使用:

<script setup lang='ts'>import { useCount } from '@/store'const count = useCount()// 1、直接调用或者修改console.log(count.name)// 2、通过$patch({}) 同时修改多个属性count.$patch({name: '刺客',num++})// 或者传入一个回调函数count.$patch((state) => {state.count = '4'})
</script>

五、actions:
actions 类似组件中的methods,可以在组件中直接调用里面的方法

// count.ts 文件
<script lang="ts">
export const useCount = defineStore('count', {state: () => {return{name: 'Andy',num: 0}},actions: {add() {// 直接通过 this 调用 state 中的属性,也可以调用其他 store 中属性,只需引入即可this.num++},},
})
</script>

组件中可以直接通过 调用 add() 方法来修改 num

<script setup>import { useCount } from '@/store'const count = useCount()count.add() 
</script>

六、gettes:

相当于组件中的 computed 计算属性:

// count.ts 文件
<script lang='ts'>
import { defineStore } from 'pinia'
export const useCount = defineStore('count', {state: () => {return{name: 'Andy',num: 0}},getters: {// 相当于组件中的 计算属性doubleCount(state): number {return  state.num * 2},doubleCountAdd():number {// 可以在其他 getter 中直接调用另一个getterreturn this.doubleCount + 1},// 接收额外参数时,需要返回一个函数处理doubleCountAdd2:(state) => {return (num:number):number => state.num * num} }
})
</script>

在组件中可以直接使用

<script setup>
import { useCount } from '@/store'
const count = useCount()
console.log(count.doubleCountAdd)
count.$patch({name: '刺客',num: 3
})const doubleCountAdd2 = count.doubleCountAdd2(8)// 上面state.num 值为 3, 传入 额外参数 为8,故最后为  3* 8 = 24
</script>

完整代码如下:

// count.ts 文件
import { defineStore } from 'pinia'
// 通过 defineStore 定义的 store 第一个参数 count 是唯一的id,用于链接devtool
// 定义 一个id 为count的 store export const useCount = defineStore('count', {state: () => {return{name: 'Andy',num: 0}},actions: {add() {this.num++},},// getter 只会依赖状态getters: {// 相当于组件中的 计算属性doubleCount(state): number {return  state.num * 2},doubleCountAdd():number {// 可以在其他 getter 中直接调用另一个getterreturn this.doubleCount + 1},// 接收额外参数,返回一个函数处理doubleCountAdd2:(state) => {return (num:number):number => state.num * num} },// 若不需要额外配置,// persist: true,// 额外配置persist: {// key: 'piniaStore', //存储名称// storage: sessionStorage, // 存储方式 默认存储在localStorage// paths: ['name'], //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态,undefined 或 null 表示持久化整个 state}
})

请添加图片描述

// main.ts 文件
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
//导入pinia 持久化 插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.mount('#app')

// 单文件组件 myPinia/index.vue 文件中使用

<template><div class="myPinia">This is a text demo of the pinia.<hr><div>count.num: {{ count.num }}</div><div>count.doubleCount: {{ count.doubleCount }}</div><div>count.doubleCountAdd: {{ count.doubleCountAdd }}</div><div>num: {{ num }}</div><div>doubleCountAdd: {{ doubleCountAdd }}</div><div>doubleCount: {{ doubleCount }}</div><div>doubleCountAdd2: <span>{{ doubleCountAdd2 }}</span></div><button @click="count.add()">add</button></div>
</template><script setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useCount } from '@/store'
const count = useCount()
console.log('==count==', count)
// 解构获取 store 中属性方法,不是响应式
const { num } = count
// 1、使用 pinia自带的storeToRefs(), 将store中属性转换为 ref 数据以保持响应式
const { doubleCountAdd } = storeToRefs(count)
console.log('=doubleCountAdd==', doubleCountAdd)
// 2、使用vue3 的 toRefs() 转化为 ref 响应式数据
const { doubleCount }  = toRefs(count)
console.log('=doubleCount==', doubleCount)
// 通过 $patch 修改state 中多个属性
count.$patch({name: '刺客',num: 3})// 传入额外参数const doubleCountAdd2 = count.doubleCountAdd2(8) // 上面state.num 值为 3, 传入 额外参数 为8,故最后为  3* 8 = 24
</script><style lang="scss" scoped>div{font-size: 18px;color: #333;span {color: red;}
}
</style>

相关文章:

vue3第四十节(pinia的用法注意事项解构store)

pinia 主要包括以下五部分&#xff0c;经常用到的是 store、state、getters、actions 以下使用说明&#xff0c;注意事项&#xff0c;仅限于 vue3 setup 语法糖中使用&#xff0c;若使用选项式 API 请直接查看官方文档&#xff1a; 一、前言&#xff1a; pinia 是为了探索 vu…...

PostgreSQL源码分析——索引扫描

这里&#xff0c;我们分析一下索引扫描的过程&#xff0c;以最简单的select * from t1 where a 100;语句为例&#xff0c;分析一下查询的过程。 postgrespostgres# \d t1;Table "public.t1"Column | Type | Collation | Nullable | Default ------------------…...

零基础入门学用Arduino 第四部分(一)

重要的内容写在前面&#xff1a; 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后&#xff0c;整体感觉是很好的&#xff0c;如果有条件的可以先学习一些相关课程&#xff0c;学起来会更加轻松&#xff0c;相关课程有数字电路…...

x-anylabelimg如何标识人脸

软件地址&#xff0c;下载CPU版本就好 https://github.com/CVHub520/X-AnyLabeling/releases/tag/v2.0.0 一、打开软件选择的一个按钮&#xff0c;选择文件夹 二、选择模型运行 未下载的模型需要安全上网下载 选用Yolov6Lite_l-Face MeiTuan生成的文件格式&#xff0c;略作调…...

Element-ui中Table表格无法显示

Element-ui中Table表格无法显示 在使用过程中发现样式正常显示但是table就是不显示&#xff0c;研究了一段时间后&#xff0c;发现问题是项目结构的问题 当你创建vue和安装el的时候&#xff0c;一定要注意进入到正确的项目文件夹&#xff0c;如果在外面也出现一个package.jso…...

电信网关配置管理系统 del_file.php 前台RCE漏洞复现

0x01 产品简介 中国电信集团有限公司(英文名称“China Telecom”、简称“中国电信”)成立于2000年9月,是中国特大型国有通信企业、上海世博会全球合作伙伴。电信网关配置管理系统是一个用于管理和配置电信网络中网关设备的软件系统。它可以帮助网络管理员实现对网关设备的远…...

游戏心理学Day18

游戏玩家心理 在游戏世界中&#xff0c;设计师的工作总是围绕尽可能留住玩家要展开。在游戏创作时&#xff0c;设计师会假设目标诉讼的特点并激励迎合他们的需求&#xff0c;如果这种假设是经过实际调研之后做出的&#xff0c;那么就会比较接近实际情况而。如果这种假设是设计…...

发文章不违规的5种解决方案,非常适用,记得收藏!

之前以为使用AI写出来的文章&#xff0c;只要检测通过就不会违规&#xff0c;结果却还是让我有些失望。最近测试几款AI工具&#xff0c;测试结果都还是会存在违规情况&#xff0c;无法全文发布。 AI是听从人的指令&#xff0c;只能说是如何下指令&#xff0c;这个非常重要。至…...

【ARMv8/ARMv9 硬件加速系列 2.2 -- ARM NEON 的加减乘除(左移右移)运算】

文章目录 NEON 加减乘除NEON 加减乘除 下面代码是使用ARMv8汇编语言对向量寄存器v0-v31执行加、减、乘以及左移和右移操作的示例。 ARMv8的SIMD指令集允许对向量寄存器中的多个数据进行并行操作。v0和v1加载数据,对它们进行加、减和乘,左移和右移操作。最后,我们会将结果存储…...

[2024-06]-[大模型]-[Ollama]- WebUI

主要涉及要部署的前端webui是来源于:https://github.com/open-webui/open-webui 正常就使用: docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-web…...

AI智能盒子助力中钢天源设备工厂升级安全防护

中钢集团安徽天源科技股份有限公司成立于2002年3月27日,是中央企业中国中钢股份有限公司控股的上市公司&#xff0c;主导产品为永磁铁氧体器件、钕铁硼器件、四氧化三锰、锶铁氧体预烧料及各类磁选机等。 在中钢天源智能化升级过程中&#xff0c;采用并定制开发一系列厂区安全…...

RNN的变种们:GRULSTM双向RNN

上篇笔记记录到RNN的一个缺点&#xff1a;训练时会出现梯度消失&#xff0c;解决的办法是找到一个更优的计算单元。这里也有GRU和LSTM。 GRU&#xff08;Gated Recurrent Unit&#xff09;门控训练网络 什么是门控机制&#xff1f;就是对当前的输入进行一个筛选。门打开&…...

Linux网络-HttpServer的实现

文章目录 前言一、请求报文的解析URL的解析 二、响应报文的发送Content-LenthConten-TypeCookie和Set-CookieCookie的风险 三、尝试发送一个HTML网页404网页Location 重定向 四、浏览器的多次请求行为总结 前言 之前我们简单理解了一下Http协议&#xff0c;本章我们将在LInux下…...

GPT-4o的综合评估与前景展望

如何评价GPT-4o? GPT-4o作为OpenAI推出的最新一代大型语言模型&#xff0c;其性能、功能和应用前景都备受关注。以下是对GPT-4o的综合评估与前景展望&#xff1a; 一、技术性能评估 响应速度&#xff1a;GPT-4o在响应速度上有了显著提升&#xff0c;能够在极短的时间内对输入…...

私人云盘(自动云同步)

一、项目简介 模仿小米的云服务&#xff0c;实现一个通过TCP实现的私人云盘&#xff0c;因为能力有限&#xff0c;所以只实现自动云同步这一个功能&#xff0c;具体可以分为三个小功能&#xff0c;即保持云端和终端数据一致、实现文件的上传与下载以及手动同步 二、涉及到的知…...

【CMake】Linux 下权限丢失与软链接失效问题

【CMake】Linux 下权限丢失与软链接失效问题 文章目录 【CMake】Linux 下权限丢失与软链接失效问题问题概述解决方法1 - 安装目录2 - 安装文件3 - 手动指定 使用 Linux 下原生命令行注意事项参考链接 问题概述 一般使用 CMake 安装&#xff0c;在 Windows 平台不会出问题&…...

内部类介绍

内部类&#xff08;Inner Class&#xff09;是在另一个类的内部定义的类。它可以访问外部类的所有成员&#xff0c;包括私有成员。内部类有两种主要形式&#xff1a;局部内部类&#xff08;定义在方法内部&#xff09;和成员内部类&#xff08;定义在类的内部&#xff0c;但不在…...

【CVPR2021】LoFTR:基于Transformers的无探测器的局部特征匹配方法

LoFTR&#xff1a;基于Transformers的局部检测器 0. 摘要 我们提出了一种新的局部图像特征匹配方法。我们建议先在粗略级别建立像素级密集匹配&#xff0c;然后再在精细级别细化良好匹配&#xff0c;而不是按顺序进行图像特征检测、描述和匹配。与使用成本体积搜索对应关系的密…...

总结一下 C# 如何自定义特性 Attribute 并进行应用

前言 Attribute&#xff08;特性&#xff09;是一种用于为程序元素&#xff08;如类、方法、属性等&#xff09;提供元数据信息的方法。 特性是一种声明式的信息&#xff0c;附加到程序元素上&#xff0c;提供额外的数据用于描述和控制这些元素的行为。 在编译和运行时&…...

三种暴露方法和引入方式

1.分别暴露 export ...export...用于按需导出一个或多个模块&#xff0c;在导入时需要使用花括号指定导入的模块名称&#xff0c;例如import { a, b } from module module.js中 export let a 1 export function b(){console.log(hello,vue) } 2.统一暴露 export { ...}用于统…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...