如何使用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}