有了Composition API后,有些场景或许你不需要pinia了

这篇具有很好参考价值的文章主要介绍了有了Composition API后,有些场景或许你不需要pinia了。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

日常开发时有些业务场景功能很复杂,如果将所有代码都写在一个vue组件中,那个vue文件的代码量可能就几千行了,维护极其困难。这时我们就需要将其拆分为多个组件,拆完组件后就需要在不同组件间共享数据和业务逻辑。有的小伙伴会选择将数据和业务逻辑都放到pinia中,这样虽然可以解决问题。但是如果将所有的复杂的业务都放在pinia中,那么pinia就会变得很乱。

将数据和业务逻辑都封装到hooks中

这时你还有另外一个选择,使用Composition API将数据和业务逻辑都抽取到hooks中。state状态的定义和更新以及具体的业务逻辑全部由hooks内部维护,组件只负责使用hooks暴露出的state状态和方法。

下面是我们封装的hooks

export const useStore = () => {
  const count = ref(0);

  const doubleCount = computed(() => {
    return count.value * 2;
  });

  function increment() {
    count.value = count.value + 1;
  }

  function decrement() {
    count.value = count.value - 1;
  }

  return {
    count,
    doubleCount,
    increment,
    decrement,
  };
};

组件只需要使用hooks中暴露出的状态countdoubleCount,以及方法incrementdecrement,无需关注具体的内部逻辑是如何实现的。

上面的封装其实是有问题的,如果我们将组件拆为两个,分别为CountValue.vue(显示count的值)和CountBtn.vue(修改count变量值)。

CountValue.vue组件代码如下:

<template>
  <p>count的值是{{ count }}</p>
  <p>doubleCount的值是{{ doubleCount }}</p>
</template>

<script setup lang="ts">
import { useStore } from "./store";

const { count, doubleCount } = useStore();
</script>

CountBtn.vue组件代码如下:

<template>
  <button @click="decrement">count--</button>
  <button @click="increment">count++</button>
</template>

<script setup lang="ts">
import { useStore } from "./store";

const { decrement, increment } = useStore();
</script>

由于我们的count变量是在useStore函数中定义的,所以每调用一次useStore函数都会重新定义一个count变量。在我们这里CountValueCountBtn组件都在setup中调用了useStore函数,通过useStore函数拿到的就不是同一个count变量。这样就会导致我们在CountBtn中修改了count变量的值,但是CountValue组件中显示的count变量的值一直没变。

多个组件同时调用hooks如何共享同一份state状态

要解决上面的问题其实很简单,问题的原因是因为每次调用useStore函数都会生成一个新的count变量。那我们就不将count变量的定义写在useStore函数中,只需要将count变量的定义写在useStore函数的外面就可以了。

下面是优化后的hooks

import { computed, ref } from "vue";

// 将count的定义放在外面
const count = ref(0);
const doubleCount = computed(() => {
  return count.value * 2;
});

export const useStore = () => {
  function increment() {
    count.value = count.value + 1;
  }

  function decrement() {
    count.value = count.value - 1;
  }

  return {
    count,
    doubleCount,
    increment,
    decrement,
  };
};

我们将count变量定义放在了useStore函数的外面,这样CountValueCountBtn组件中调用useStore拿到的count变量都是我们在useStore函数外面定义的count变量。

总结

这篇文章介绍了在多个组件中需要复用状态和业务逻辑的情况时,我们可以不将这些状态和业务逻辑写到pinia中,而是使用Composition API将状态和业务逻辑封装成一个hooks。为了多个组件同时调用hooks时能够共用同一个state状态,我们需要将定义的变量写在useStore函数外面。

如果我的文章对你有点帮助,欢迎关注公众号:【欧阳码农】,文章在公众号首发。你的支持就是我创作的最大动力,感谢感谢!文章来源地址https://www.toymoban.com/news/detail-818523.html

到了这里,关于有了Composition API后,有些场景或许你不需要pinia了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 详解Vue 3 的 Composition API

    Vue 3 的 Composition API 是一种新的组合式 API 风格,它可以更好地组织和复用组件逻辑。相比于 Vue 2 的 Options API,Composition API 提供了更灵活和可组合的方式来编写组件。 下面是 Composition API 的一些特点和优势: 函数式组件:Composition API 支持使用函数式组件的方式来编写组件。

    2024年02月10日
    浏览(38)
  • vue/composition-api 的使用

    最近我们项目是 vue2,但是要使用 jsx + composition ,所以来学习一下这个 vue/composition-api (一)安装 (二)注册 在 main.ts 中 (三)使用 最基本的组件: defineComponent 本身的功能很简单,但是最主要的功能是为了 ts 下的类型推导~ 1. setup 函数 setup 在 create 实例在初始化之前调

    2024年02月05日
    浏览(42)
  • 有了Spring为什么还需要SpringBoot呢

    目录 一、Spring缺点分析 二、什么是Spring Boot 三、Spring Boot的核心功能 3.1 起步依赖 3.2 自动装配 1. 配置文件和依赖太多了!!! spring是一个非常优秀的轻量级框架,以IOC(控制反转)和AOP(面向切面)为思想内核,极大简化了JAVA企业级项目的开发。虽然Spring的组件代码是轻

    2024年02月08日
    浏览(51)
  • 有了NULL,为什么C++还需要nullptr?

    目录 1.引言 2.类型安全 3.函数重载 4.代码清晰性 5.示例 6.总结 在C++编程中,nullptr是一个类型安全的空指针常量,自C++11起被引入。然而,在此之前,程序员们通常使用NULL或0来表示空指针。那么,为什么有了NULL之后,C++还需要引入nullptr呢?本文将从类型安全、函数重载和代

    2024年02月21日
    浏览(51)
  • 为什么有了HTTP,还需要WebSocket协议?

    目录 WebSocket是什么? WebSocket怎样建立连接? WebSocket的实际用途 WebSocket 与 HTTP 的选择 HTTP 是基于 TCP协议 的,同一时间里,客户端和服务器只能有一方主动发数据,是 半双工通信 。 通常,打开某个网页,我们每点击一次网页上的某个选项,前端就会发送一次HTTP请求,网站

    2024年02月11日
    浏览(48)
  • 面试官:为什么有了sleep还需要wait?

    对于线程执行最大的问题就是随机调度,抢占式执行,对于程序猿来讲,是不喜欢这种随机性的,程序猿喜欢确定的东西,于是就有了一些方法,可以控制线程之间的执行顺序,虽然线程在内核里调度是随机的,但我们可以通过一些 api 让线程主动阻塞等待,主动放弃 CPU 给其

    2024年02月05日
    浏览(54)
  • 为什么有了IP地址,还需要MAC地址呢?

    不知道大家有没有困惑:为什么有了IP地址,还需要MAC地址呢? 他们之间到底有什么联系?又有什么区别?是不是有一个是多余的? 流言传到了“IP地址”和“MAC地址”的耳朵里,他俩也非常苦恼,今天文档君把话筒递给他们,看看他们怎么说?     PART   0 1   MACIP的自白

    2024年02月06日
    浏览(54)
  • Java 中有了基本类型为什么还需要包装类?

    Java 中有8种基本数据类型,这些基本类型又都有对应的包装类。 分类 基本数据类型 包装类 布尔型 boolean Boolean 整型 byte Byte short Short int Integer long Long 字符型 char Character 浮点型 float Float double Double 因为 Java 是一种面向对象语言,很多地方都需要使用对象而不是基本数据类型。

    2024年02月14日
    浏览(43)
  • 已经有了阿里云OSS还需要开通CDN吗?

        单一的OSS模式,计费包括存储和外网流出费用,目前通常比较流行的方式是 OSS + CDN 的组合模式,OSS负责存储,CDN负责加速,那么只从流量费用的层面来说,采用 OSS + CDN 组合模式比单一OSS模式更加经济和省钱,当然,从安全角度来说采用 OSS + CDN 组合模式也更有优势。

    2024年01月16日
    浏览(38)
  • 【vue3】11-Vue 3中的Composition Api(一)

    在Vue2中,我们编写组件的方式是Options APl: Options API的一大特点就是在 对应的属性 中编写 对应的功能模块 ; 比如 data定义数据 、 methods中定义方法 、 computed中定义计算属性 、 watch中监听属性改变 ,也包括 生命周期钩子 ; 但是这种代码有一个很大的弊端: 当我们 实现某一个功

    2024年02月08日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包