Svelte访问子组件脚本标记中的存储变量

Question

我有一个Svelte＆Sapper应用程序，我在其中使用Svelte可写存储来设置具有初始空白字符串值的变量：

import { writable } from 'svelte/store';
export let dbLeaveYear = writable('');

在我的Index.svelte文件中，我将其导入，然后计算出该变量的值并进行设置（如果相关，我将在```Index.svelte的onMount函数中进行此操作：]

<script>
  import {dbLeaveYear} from "../stores/store.js"

  function getCurrentLeaveYear() {
    const today = new Date();
    const currYear = today.getFullYear();
    const twoDigitYear = currYear.toString().slice(-2);
    const cutoffDate = `${twoDigitYear}-04-01`
    const result = compareAsc(today, new Date(cutoffDate));
    if (result === -1) {
      $dbLeaveYear = `${parseInt(twoDigitYear, 10) - 1}${twoDigitYear}`;
    } else {
      $dbLeaveYear = `${twoDigitYear}${parseInt(twoDigitYear, 10) + 1}`;
    }
  }

  onMount(() => {
    getCurrentLeaveYear();
  });
</script>

我在Index.svelte中渲染了一个子组件

<Calendar />

在“日历”子组件中，我正在导入变量，并尝试访问它以对其执行转换，但是我收到错误消息，称该变量仍然为空白-似乎没有从Index.svelte中拾取分配：

<script>
  import {dbLeaveYear} from "../stores/store.js"
  const calStart = $dbLeaveYear.slice(0, 2)
</script>

但是，如果我在与<p>{$dbLeaveYear}</p>相同的Calendar子组件中使用HTML元素中的值，则会使用Index.svelte中的计算值来填充它。

如何访问子组件的<script>标签内的store变量？这有可能吗？我尝试在onMount中进行辅助，尝试在函数中进行赋值-似乎没有任何效果，并且总是说$dbLeaveYear是空字符串。

我需要该值是动态的，因为休假年的值可以更改。

Answer 1

在深入探讨您的问题之前，我说您不应该直接变异store变量，而应使用提供的set或update方法。这样可以避免难以调试的错误：

  if (result === -1) {
      dbLeaveYear.set(() => `${parseInt(twoDigitYear, 10) - 1}${twoDigitYear}`);
    } else {
      dbLeaveYear.set(`${twoDigitYear}${parseInt(twoDigitYear, 10) + 1}`);
    }

没有了，问题似乎是您到商店的auto-subscribe对于您的用例而言并不理想。您需要为此使用subscription属性：

<script>
  import { dbLeaveYear } from "../stores/store.js"
  import { onDestroy, onMount } from "svelte"

  let yearValue;
  // Needed to avoid memory leaks
  let unsubscribe

  onMount(() => {
    unsubscribe = dbLeaveYear.subscribe(value => yearValue = value.slice(0, 2));
  })

  onDestroy(unsubscribe);
</script>

可能导致您出现问题的另一件事是竞争状况。因此，在子级渲染时，父级组件的更新尚未完成。然后，您需要在渲染子组件中添加完整性检查。