标签: svelte-store

我正在通过创建简单的应用程序来学习 Svelte。

逻辑是使用类编写的。这个想法是，所有需要的数据都来自类实例属性。实例的实例化不应超过一次。我正在使用商店来提供这个实例的组件。

问题是我无法使用这种方法获得反应性。我尝试了可读和可写的商店，但没有任何帮助。仍然可以使用 OOP 获得反应性，我该怎么办？重新分配和创建新实例将是昂贵的。

编辑

我无法在 REPL 中编写示例，因为类太大了。

解析器.js

export default class Parser {
  constructor() {
    this._history = [];
  }

  parse(string) {
    this._history.push(string)
  }

  get history() {
    return this._history;
  }
}

在这里，我将实例传递给商店。

解析器商店.js

import writable from "svelte/store";
import Parser from "Parser.js"

export const parserStore = writable(new Parser());

在这个组件中，我获取了实例并被动地使用了一个方法。

Component_1.svelte *

import { parserStore } from "parserStore.js";

$: result = parserStore.parse(binded_input_value);

我想得到的是使用类方法更新的最新时间历史属性：

Component_2.svelte

import { parserStore } from "parserStore.js";

$: history = parserStore.history;

{#each history as ... }

我知道，这不是最好的例子，但我想要的是可通过商店获得的反应式类实例。实际上这些值是最新的，但它不会导致组件的重新渲染。当组件被安装 …

如何将数据（例如：导航栏标题）传递到父元素中使用的组件？

<!-- _layout.svelte -->
<script>
  import Nav from "../components/Nav.svelte";
  let navTitle = "MyApp";
</script>

<Nav {navTitle}/>
<slot />

<!-- Nav.svelte -->
<script>
  export let navTitle = "";
</script>
<h1>{navTitle}</h1>

<!-- Login.svelte -->
How to pass navTitle value from here to Nav.svelte?

需要澄清的是，这需要可扩展，并且能够使用 Routify 处理 SPA 的所有路由的页面加载/转换，最好提供默认值并能够具有 HTML 值：

<!-- Article.svelte -->

<!-- User.svelte -->
navTitle is '<a href="/user">My Account </a>'

<!-- Comment.svelte -->

我有 3 个关于 Svelte 商店的问题：

1. 如何在商店内发出ajax请求？我尝试使用以下方法：

REPL 演示

//store.js

import { writable } from 'svelte/store';

let data = [];

const apiURL = "https://jsonplaceholder.typicode.com/todos";

async function getData(){
    const response = await fetch(apiURL);
    data = (await response.json()).slice(0,20);
    console.log('Response:', data);
}
getData();

export const testsStore = writable(data);

请求通过，但数据永远不会传递到导出。我见过的所有示例都使用没有 async/await 的静态数据。我也试过return data;，writable(getData());但它返回一个承诺而不是数据本身。

2. 这甚至是将数据从 API 加载到商店的正确方法还是我应该在其他地方进行调用。

3. 我如何以及何时使用export default testsStore;我尝试从另一个示例中使用它并且它抛出说store.js isn't exporting testsStore

我有两个组件在组件树中距离很远，我对如何在两者之间进行通信存有疑问。我有搜索组件、listItems 和商店。

商店.svelte

<script context="module" lang="ts">
 import type {Items} from '../../Models/Items.model';
 import { writable } from 'svelte/store';

 export const dataItems = writable<Items[]>([]);

  const filterInfo = (term:string) => {
     dataItems.update(item => {
           item.filter(x => {
                return x.name.toLowerCase().includes(term.toLowerCase())
                || x.description.toLowerCase().includes(term.toLowerCase());
           })
           return dataItems;
        })
    }*/


export const dispatcher = {filterInfo};

</script>

搜索组件

<script lang="ts">
    import { dispatcher } from './ViewI/store.svelte';
    

    let value:any;

    const handleChange = () => {
     dispatcher.filterInfo(value)
    console.log(value)
     }
    
    
</script>

<Search>
 <input bind:value
 on:input={handleChange}>
</Search>

列表项组件

import type {Items} from …

我正在尝试创建一个svelte app使用svelte-kit. 我有一个内部幼虫服务器，我在其中使用构建文件夹来打开文件index.html。

但问题是每次我要做改变时我都必须这样做svelte-kit build。

最初，svelte-kit build也不会创建index.html。因此，我们配置一些适配器来解决这个问题。

我希望在运行时也有相同的行为svelte-kit dev。我不知道我需要更改哪些配置。目前，当我运行 dev 时，它会创建.svelte-kit文件夹。

// svelte.config.js file
import adapter from '@sveltejs/adapter-static';

const config = {
kit: {
    adapter: adapter(),
    
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',

    vite: {
        optimizeDeps: {
            include: ['just-throttle', 'dayjs']
        }
    }

   },
};

export default config;

Svelte 存储文档显示正在更新字符串或整数，但我没有在存储中找到任何动态函数。

我不明白如何使该getData函数可写，以便通知 html 更改。

在下面的示例中，我希望在调用函数b后显示。updateKey

您可以在此处找到 REPL 中的最小代码：https://svelte.dev/repl/3c86bd48d5b5428daee514765c926e58 ?version=3.29.7

此处使用相同的代码，以防 REPL 宕机：

应用程序.svelte：

<script>
import { getData } from './store.js';
import { updateKey } from './store.js';
setTimeout(updateKey, 1000);
</script>

<h1>{getData()}!</h1>

商店.js

import {setContext} from 'svelte';
import {writable} from 'svelte/store';

var data = {
    'a': 'a',
    'b': 'b'
};

var key = 'a';

export const getData = function() {
    return data[key];
}

export const updateKey = () => {
    key = 'b';
}

目标是在商店中使用动态功能。

我可以订阅这样的商店：

count.subscribe(value => {
  count_value = value;
});

但是当我们想要取消订阅时，我们会将之前的订阅代码放入一个新变量中（成为函数表达式），并仅在组件被销毁时才运行它（onDestroy）

const unsubscribe = count.subscribe(value => {
    count_value = value;
});

onDestroy(unsubscribe);

问题是，如何将前一个函数放入一个名为 unsubscribe 的新变量中。可以对商店执行取消订阅功能。我的意思是，我们甚至根本不更改取消订阅实现的订阅代码，我们所做的就是将其放入一个新变量中，使其成为一个函数表达式，并且仅通过 via 调用它onDestroy，那么它如何神奇地取消订阅呢？它实际上是如何运作的？

我是 Svelte 的新手，犯了一个菜鸟错误。我有一个到服务器的 websocket 连接，我正在记录数百条消息并将它们添加到商店，但页面根本不更新。

应用程序.svelte

<script>
    import Socket from "./Socket.svelte"
    import msgs from './stores'
</script>

<main>
    <Socket items="{$msgs}"/>
</main>

Socket.svelte

<script>
    export let items
</script>

{items.length}
{#if items}
    {#each items as msg, i}
        <p>{i} {msg}</p>
    {/each}
{:else}
    <p class="loading">waiting...</p>
{/if}

套接字.js

import { readable, writable } from 'svelte/store';

let msgs = []
const msgStore = readable(msgs)
export default msgStore

const socket = new WebSocket("ws://localhost:8080/socket");

socket.binaryType = "arraybuffer";

socket.onopen = function (event) {
  msgs = [...msgs, "Connected"];
};

socket.onmessage = …

我想警告用户在离开页面之前保存他的更改（表单更改）。如果他点击窗口上的任意位置，我想触发此警报。它可能是后退按钮或重新加载或页面上可用的任何导航链接。有人可以帮忙吗？

我正在通过环绕一个精简的可写存储来创建一个自定义的精简存储。

我想检测该商店何时未被任何组件订阅；当订阅数为0时

我的目标是清除一些在无人使用时与自定义存储绑定的大量外部资源（websockets）。

目前，我通过环绕 subscribe( ) 方法来计算订阅和取消订阅。它按预期工作。但对我来说，这看起来像是一个令人讨厌的黑客攻击。

我的问题：在 Svelte 中是否有一个标准/干净的方法来实现这种行为？

如果没有，在 Javascipt 和 svelte 方面有更多经验的人可以确认这是否合法吗？

演示：https://svelte.dev/repl/f4e24fb5c56f457a94bf9cf645955b9f ?version=3.43.1

import { writable } from 'svelte/store';

// Instanciate the store
export let store = MakeStore();

// By design, I want a function that returns a custom svelte store
export function MakeStore(initialValue = null) {

        const { subscribe, set, update } = writable(initialValue);

        let subscribercount = 0;

        let wsubscribe = function (run, callback) {
            subscribercount++;
            console.log("subscribercount++", subscribercount);

            let wunsubscribe = subscribe(run, …