Vue3 中使用 Vuex 和 Pinia 对比之 Pinia的用法

本文承接上一篇Vue3 中使用 Vuex 和 Pinia 对比之 Vuex的用法
与Vuex 相比，如果你觉得 Vuex 比较麻烦的话，那么Pinia提供了更简单的 API，具有更少的操作，简单理解一下，就是相当于把 Vuex 的 mutation 和 action 融成了一个，也就是说，比无需像 Vuex 要考虑异步任务，Pinia 让你直接异步请求操作修改数据状态。
Pinia（发音为 /piːnjʌ/，类似于英语中的“peenya”）是最接近有效包名 piña（西班牙语中的_pineapple_）的词。 菠萝实际上是一组单独的花朵，它们结合在一起形成多个水果。
Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终Pinia 团队意识到 Pinia 已经实现了在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

Pinia API 与 Vuex ≤4 有很大不同

  • 支持多Store：最大的不同是 Vuex 是单例的，只有一个 store ，而 Pinia 有多个 store；
  • Pinia中 mutations 不再存在。最初带来了 devtools 集成，但这不再是问题，Pinia 已被devtool 支持了。
  • store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数；
  • 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
  • 不再需要注入、导入函数、调用函数、享受自动完成功能！
  • 无需动态添加 Store，默认情况下它们都是动态的，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的。
  • 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
  • 没有 命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。

Pinia 的核心概念

  • State - 等效于 Vuex 中的 State
  • Getters - 等效于 Vuex 中的 Getters
  • Actions - 等效于 Vuex 中的 Actions + mutations

Pinia 的使用

第一步：安装 Pinia

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

第二步：定义一个 Store

import { defineStore } from 'pinia'// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('test1', {// other options...
})

上面的 ‘test1’ ，这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use… 是跨可组合项的约定，以使其符合你的使用习惯。

第三步 使用 store

上面我们仅仅是定义了一个 store，在 setup() 中调用 useStore() 之前不会创建 store：

import { useStore } from '@/stores/counter'export default {setup() {const store = useStore()return {// 您可以返回整个 store 实例以在模板中使用它store,}},
}

一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性。
注意事项：store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，就像setup 中的props 一样，我们不能对其进行解构：

export default defineComponent({setup() {const store = useStore()// ❌ 这不起作用，因为它会破坏响应式// 这和从 props 解构是一样的const { name, doubleCount } = storename // "eduardo"doubleCount // 2return {// 一直会是 "eduardo"name,// 一直会是 2doubleCount,// 这将是响应式的doubleValue: computed(() => store.doubleCount),}},
})

为了从 Store 中提取属性同时保持其响应式，需要使用storeToRefs()。 它将为任何响应式属性创建 refs。 当仅使用 store 中的状态但不调用任何操作时，可以这样使用：

import { storeToRefs } from 'pinia'export default defineComponent({setup() {const store = useStore()// `name` 和 `doubleCount` 是响应式引用// 这也会为插件添加的属性创建引用// 但跳过任何 action 或 非响应式（不是 ref/reactive）的属性const { name, doubleCount } = storeToRefs(store)return {name,doubleCount}},
})

访问 state

默认情况下，可以通过 store 实例访问状态来直接读取和写入状态：

const store = useStore()
store.counter++

重置状态值为初始值

可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值：

const store = useStore()
store.$reset()

访问 getter

getter 同 Vuex 一样，它也等效于 Vue 的 computed ，计算属性，和 state 一样直接调用即可

export const useStore = defineStore('main', {state: () => ({counter: 0,}),getters: {doubleCount: (state) => state.counter * 2,},
})//在页面中使用
const store = useStore();
console.log(store.doubleCount);

getter 中是可以互相嵌套访问的，比如 getters 中有 getA 和 getB

getters:{getA:(state)=>state.counter *2,getB(){//需要使用 getA ，那么这个函数就不要用 箭头函数了，普通函数，通过 this 直接拿到 getAreturn this.getA +1;}
}

getter 传参

Getters 只是幕后的 computed 属性，因此无法向它们传递任何参数。 但是，您可以从 getter 返回一个函数以接受任何参数：

//定义 store
export const useStore = defineStore('main', {getters: {getUserById: (state) => {return (userId) => state.users.find((user) => user.id === userId)// 返回一个函数用以接收参数；},},
})//------在组件中使用------
<script>
export default {setup() {const store = useStore()return { getUserById: store.getUserById }},
}
</script><template><p>User 2: {{ getUserById(2) }}</p>
</template>

Actions

Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：

export const useStore = defineStore('main', {state: () => ({counter: 0,}),actions: {increment() {this.counter++},randomizeCounter() {this.counter = Math.round(100 * Math.random())},},
})//在组件中使用时，Actions 像 methods 一样被调用：
export default defineComponent({setup() {const main = useMainStore()// Actions 像 methods 一样被调用：main.randomizeCounter()return {}},
})

与 getters 一样，操作可以通过 this 访问 whole store instance 并提供完整类型（和自动完成）支持。 与它们不同，actions 可以是异步的，可以在其中await 任何 API 调用甚至其他操作！

import { mande } from 'mande'const api = mande('/api/users')export const useUsers = defineStore('users', {state: () => ({userData: null,// ...}),actions: {async registerUser(login, password) {try {this.userData = await api.post({ login, password })showTooltip(`Welcome back ${this.userData.name}!`)} catch (error) {showTooltip(error)// 让表单组件显示错误return error}},},
})

总结：Vuex 和 Pinia 我该怎么选？

个人觉得，你喜欢哪个用哪个，但是有如下对比，供大家自行参考：

名称优点缺点适用（推荐）场景
Vuex1. 更加成熟；
2. 也是因为第一点，所以它也更加稳定；
3. 更强大：提供了一些高级功能，比如：中间件和插件，使得它可以处理更加复杂的状态管理需求；		1. 学习成本高，相对于Pinia 难一些；
2. 相对来说比较繁琐，概念比较复杂；
3. 量级比较大，包体积也大 ；		1. 大型SPA项目；
2. 高复杂度且对 store 要求有更多功能和灵活性的开发者
Pinia1. 轻量级，体积小 约 1KB；
2. 简单易用；
3. 更灵活，提供了多store ;
4. 允许捆绑器自动对它们进行代码拆分，并提供更好的 TypeScript 推理。		1. 相对来说有点新；
2. 生态不够完善，没有Vuex 那么庞大的社区支持和解决方案；		1. 中小型应用，需要简单轻量级的状态管理库的开发者；
2. 低复杂度的Vue 项目；
3. 更流畅的开发体验；

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

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

相关文章

Microsoft Excel 直方图

Microsoft Excel 直方图

Microsoft Excel 直方图 1. 数据示例2. 打开 EXCEL3. settings4. 单击直方图柱&#xff0c;右键“添加数据标签”References 1. 数据示例 2. 打开 EXCEL 数据 -> 数据分析 -> 直方图 3. settings 输入区域样本值、接受区域分类间距&#xff0c;输出选项选择“新工作表组…
阅读更多...
Java中hashCode()与equals()的相关规定

Java中hashCode()与equals()的相关规定

API文件有对对象的状态制定出必须遵循的规则。hashCode()和equals()是object中定义的两个方法&#xff0c;它们都与对象的相等性有关。 通常情况下我们需要同时使用这两个方法来判断两个对象是否相等&#xff0c;只有两个对象的equals()方法返回true&#xff0c;并且它们的has…
阅读更多...
Vue-路由-常见设置

Vue-路由-常见设置

1. 重定向 1.1 介绍 在Vue应用中&#xff0c;路由管理是至关重要的。当用户访问某个URL时&#xff0c;我们需要确保他们看到正确的页面。有时候&#xff0c;出于各种原因&#xff0c;我们可能需要将用户从一个URL重定向到另一个URL。在Vue Router中&#xff0c;重定向功能非常…
阅读更多...
手把手图解教你Java SPI源码分析

手把手图解教你Java SPI源码分析

原创/朱季谦 我在《Java SPI机制总结系列之开发入门实例》一文当中&#xff0c;分享了Java SPI的玩法&#xff0c;但是这只是基于表面的应用。若要明白其中的原理实现&#xff0c;还需深入到底层源码&#xff0c;分析一番。 这里再重温一下SPI机制的概念&#xff1a;SPI&#…
阅读更多...
JS实现网页轮播图

JS实现网页轮播图

轮播图也称为焦点图&#xff0c;是网页中比较常见的网页特效。 1、页面基本结构&#xff1a; 大盒子focus&#xff0c;里面包含 左右按钮ul 包含很多个li &#xff08;每个li里面包含了图片&#xff09;下面有很多个小圆圈 因为我们想要点击按钮&#xff0c;轮播图左右播放&a…
阅读更多...
外部晶振、复位按键、唤醒按键、扩展排针原理图详解

外部晶振、复位按键、唤醒按键、扩展排针原理图详解

前言&#xff1a;本文对外部晶振、复位按键、唤醒按键、扩展排针原理图详解。本文使用的MCU是GD32F103C8T6 目录 外部晶振原理图 复位按键、唤醒按键原理图 扩展排针部分原理图 ​外部晶振原理图 如下图&#xff0c;两个外部晶振&#xff0c;分别是8M&#xff08;主晶振&a…
阅读更多...
【InternLM 大模型实战】第三课

【InternLM 大模型实战】第三课

基于 InternLM 和 LangChain 搭建你的知识库 大模型开发范式RAG&#xff08;检索增强生成&#xff09;FINETUNE&#xff08;微调&#xff09; LangChain 简介构建向量数据库加载源文件文档分块文档向量化 搭建知识库助手构建检索问答链RAG方案优化建议 Web Demo 部署动手实战In…
阅读更多...
让网页自动化测试更简便，流程图设计工具为您解决痛点

让网页自动化测试更简便，流程图设计工具为您解决痛点

在数字化时代&#xff0c;网页自动化测试已经成为提高工作效率、保证项目质量的重要手段。然而&#xff0c;传统的自动化测试往往需要复杂的编程技能&#xff0c;对非专业人员来说门槛较高。为了解决这个问题&#xff0c;我们向您推荐一款创新的设计工具&#xff0c;它可以通过…
阅读更多...
使用numpy处理图片——二值图像

使用numpy处理图片——二值图像

大纲 载入图像灰阶处理二值处理 在《使用numpy处理图片——灰阶影像》一文中&#xff0c;我们将彩色图片转换成灰阶图片。本文将在这个基础上将灰阶图片转换成二值图像。 二值图像就是只有黑白两种颜色的图像。像素最终显示黑还是白&#xff0c;需要有一个判断标准。如果图片太…
阅读更多...
基于Token认证的登录功能实现

基于Token认证的登录功能实现

Session 认证和 Token 认证过滤器和拦截器 上篇文章我们讲到了过滤器和拦截器理论知识以及 SpringBoot 集成过滤器和拦截器&#xff0c;本篇文章我们使用过滤器和拦截器去实现基于 Token 认证的登录功能。 一、登录校验 Filter 实现 1.1、Filter 校验流程图 获得请求 url。判…
阅读更多...
Gradle的安装及源替换步骤详解

Gradle的安装及源替换步骤详解

工具介绍 Gradle是一款强大的构建工具&#xff0c;用于管理项目的依赖关系和构建过程。在使用Gradle之前&#xff0c;我们需要先进行安装&#xff0c;并可能需要更改默认的依赖源&#xff0c;以提高下载速度。下面是一步步的Gradle安装及源替换指南。 第一步&#xff1a…
阅读更多...
Repo命令与git的关系

Repo命令与git的关系

Repo命令与git的关系是很密切的。 我们都知道&#xff0c;git是一个开源的版本控制系统&#xff0c;常用在大型项目的管理上。 我们对repo的使用和了解就比较少了。Repo是一个基于Git构建出来的工具&#xff0c;它的出现不是为了取代Git&#xff0c;而是为了更方便开发者使用Gi…
阅读更多...
使用PE信息查看工具和Beyond Compare文件比较工具排查dll库文件版本不对的问题

使用PE信息查看工具和Beyond Compare文件比较工具排查dll库文件版本不对的问题

目录 1、问题说明 2、修改了代码&#xff0c;但安装版本还是有问题 3、使用PE信息查看工具查看音视频库文件&#xff08;二进制&#xff09;的时间戳 4、使用Beyond Compare比较两个库文件的差异 5、找到原因 6、最后 C软件异常排查从入门到精通系列教程&#xff08;专栏…
阅读更多...
Python 文本处理库之chardet使用详解

Python 文本处理库之chardet使用详解

概要 当处理文本数据时&#xff0c;经常会遇到各种不同的字符编码。这可能导致乱码和其他问题&#xff0c;因此需要一种方法来准确识别文本的编码。Python中的chardet库就是为了解决这个问题而设计的&#xff0c;它可以自动检测文本数据的字符编码。本文将深入探讨chardet库的…
阅读更多...
浏览器缓存

浏览器缓存

浏览器缓存是指用户在访问web页面时,将一些静态资源(js,css,图片)缓存到本地硬盘(大:1T)或内存(8G,16G)中,当下次访问页面时,不用向服务端发送请求请求资源,直接从本地加载资源,可以提高用户体验 分类:强缓存和协商缓存 一、强缓存:是指用户第一次请求资源成功后,会将响应头字…
阅读更多...
研究领域知名课题组调研

研究领域知名课题组调研

Visual SLAM&#xff1a; reference: [connect paper]{https://www.connectedpapers.com/}https://zhuanlan.zhihu.com/p/130530891 德国慕尼黑工业大学计算机视觉组 研究方向&#xff1a;三维重建、机器人视觉、深度学习、视觉 SLAM 等 实验室主页&#xff1a;https://vision…
阅读更多...
MySQL如何存储表情符号？

MySQL如何存储表情符号？

存储表情符号 默认mysql的字符集是utf8&#xff0c;排序规则为 utf8_general_ci INSERT INTO department (name) VALUES (&#x1f604;) 在存储表情的时候会报 1366 - Incorrect string value: \xF0\x9F\x98\x84 for column name at row 1, Time: 0.007000s 这时需要修改字符集…
阅读更多...
Socket.D v2.3 发布（打通前端与后端）

Socket.D v2.3 发布（打通前端与后端）

基于事件和语义消息流的网络应用层协议。 有用户说&#xff0c;“Socket.D 之于 Socket&#xff0c;尤如 Vue 之于 Js、Mvc 之于 Http”。支持 tcp, udp, ws, kcp 传输。 主要特性 基于事件&#xff0c;每个消息都可事件路由所谓语义&#xff0c;通过元信息进行语义描述流关…
阅读更多...
git 的安装

git 的安装

git 的安装 在我们开始使用 Git 前&#xff0c;需要将它安装在我们的电脑上。即便已经安装&#xff0c;最好将它升级到最新的版本。 我们可以通过软件包或者其它安装程序来安装&#xff0c;或者下载源码编译安装。 本文只介绍通过在 windows 上安装软件包的方式&#xff0c;其…
阅读更多...
大模型实战05——LMDeploy大模型量化部署实践

大模型实战05——LMDeploy大模型量化部署实践

大模型实战05——LMDeploy大模型量化部署实践 1、大模型部署背景 2、LMDeploy简介 3、动手实践环节——安装、部署、量化 注 笔记内容均为截图 笔记课程视频地址&#xff1a;https://www.bilibili.com/video/BV1iW4y1A77P/?spm_id_from333.788&vd_source2882acf8c823ce…
阅读更多...
最新文章

Copyright @ 2022~2023