如何使用ES6解构语法减少代码?

How to reduce code using es6 destructuring syntax?(如何使用ES6解构语法减少代码?)

本文介绍了如何使用ES6解构语法减少代码?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用urql和Svelte,我很高兴。

有一件事我想改进,但我不知道如何改进。

很多次我的代码都是这样的:

<script lang="ts">
  import { operationStore, query } from "@urql/svelte";
  import { EntertainmentPlayerDocument } from "generated/queries";

  const entertainmentPlayer = operationStore(EntertainmentPlayerDocument, { id });

  query(entertainmentPlayer);
</script>

{#if $entertainmentPlayer.fetching}
  Loading...
{:else if $entertainmentPlayer.error}
  {$entertainmentPlayer.error}
{:else}
  <Button disabled={
      $entertainmentPlayer.data.entertainmentPlayer.state == EntertainmentPlayerStateEnum.Finish ||
      $entertainmentPlayer.data.entertainmentPlayer.state == EntertainmentPlayerStateEnum.Making
    }
  >
    MyButton
  </Button>
{/if}

我在代码中使用了很多很多次$entertainmentPlayer.data.entertainmentPlayer

有没有办法减少这一点?

我尝试了以下代码:

<script lang="ts">
  import { operationStore, query } from "@urql/svelte";
  import { EntertainmentPlayerDocument } from "generated/queries";

  const {data: {entertainmentPlayer}, fetching, error} = operationStore(EntertainmentPlayerDocument,{ id });

  // query(entertainmentPlayer); HOW TO USE THIS NOW?
</script>

但正如您从代码中看到的,我现在不知道如何调用query(entertainmentPlayer)

如果我使用以下代码,entertainmentPlayer上的打字脚本定义将丢失:

const entertainmentPlayerStore = operationStore(EntertainmentPlayerDocument, { id });

query(entertainmentPlayerStore);

$: ({
  data: { entertainmentPlayer } = { entertainmentPlayer: {} },
  fetching,
  error
} = $entertainmentPlayerStore);

// Here `entertainmentPlayer` is no more typed.

你能帮我吗?

推荐答案

没有什么能阻止您在代码中引入额外变量:

<script lang="ts">
  import { operationStore, query } from "@urql/svelte";
  import { EntertainmentPlayerDocument } from "generated/queries";

  const queryOperation = operationStore(EntertainmentPlayerDocument, { id });

  query(entertainmentPlayer);

  const { entertainmentPlayer } = queryOperation.data ?? {};
</script>

{#if $queryOperation.fetching}
  Loading...
{:else if $queryOperation.error}
  {$queryOperation.error}
{:else}
  <Button disabled={
      $entertainmentPlayer.state == EntertainmentPlayerStateEnum.Finish ||
      $entertainmentPlayer.state == EntertainmentPlayerStateEnum.Making
    }
  >
    MyButton
  </Button>
{/if}

这篇关于如何使用ES6解构语法减少代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何使用ES6解构语法减少代码?

基础教程推荐