Svelte v3 совместно использует экспортированную функцию asyn c - PullRequest
Новая
       2

Svelte v3 совместно использует экспортированную функцию asyn c

0 голосов
/ 01 апреля 2020

Svelte v3. У меня есть компонент Shared.svelte. 

<script context="module">
    import {messages} from './store/store';

    export async function reloadData() {
        const url = 'https://domain.tld/api/v1/messages/';
        const response = await fetch(url);
        $messages = await response.json();
    }
</script>

И я хотел бы использовать эту функцию reloadData() в App.svelte. 

<script>
// omitted
    import {reloadData} from "./Shared.svelte";

    onMount(async () => {
        await reloadData();
    })
</script>

Я получаю ReferenceError: reloadData is not defined

Как я могу иметь общую библиотеку функций, которая использует хранилище. Если бы не магазин, я мог бы просто написать это в файле. js и экспортировать по умолчанию. Но экспорт по умолчанию приводит к ошибке, говорящей, что я не могу экспортировать дефолт в компоненте Svelte.

Я прочитал контекст модуля / экспорт

1 Ответ

2 голосов
/ 01 апреля 2020

Эта строка внутри <script context="module"> не должна компилироваться: 

        $messages = await response.json();

Для меня это выдает: 

Cannot reference store value inside <script context="module">

Что означает, что вы не можете использовать синтаксис $ в context="module", что имеет смысл, поскольку префикс $ по сути означает «автоматически подписываться при создании компонента и отписываться при его уничтожении». Но область видимости модуля не имеет экземпляра.

Как получить общую библиотеку функций, которая использует хранилище.

Принимая это за вопрос ... Как вы пытались сделать: либо внутри блока context=module компонента, либо в необработанном файле js.

Svelte предоставляет инструмент для работы с хранилищем вне контекста компонента (экземпляра). Фактически, одна из основных задач хранилищ - связать реактивность между «сырым» js и контекстом компонентов Svelte.

Если вы хотите изменить значение доступного для записи хранилища (как в вашем примере) используйте метод set хранилища (доступного для записи): 

messages.set(await response.json())

Если вам нужно прочитать значение хранилища только один раз, используйте помощник get : 

import { get } from 'svelte/store'

const messagesValue = get(messages)

Если вам нужно отслеживать изменения в значении, либо подпишитесь на магазин: 

const dispose = messages.subscribe(messagesValue => {
  // do something with the value
  console.log(messagesValue)
})

// don't forget to call dispose when you're not interested in the value anymore!!

... или используйте производные магазины , для преимущества чтобы Svelte автоматически управлял вашим жизненным циклом (распоряжением) для вас.

Вы должны понимать, что хранилище Svelte на самом деле является очень простой конструкцией. У него есть метод подписки, необязательный метод set и, в основном, все. Прочитайте магазинный договор в документации: там все есть. Три коротких правила. Это означает, что вы можете легко справиться с ними (и создать новые сортировки), потому что вы уже знаете все, что нужно знать!

...