标签: svelte-store

我是 Svelte 商店的新手。在 svelte 教程中，他们使用了update()方法<Incrementer/>和<Decrementer/>组件来更新值。但在 中<Resetter/>，他们使用了set()重置值的方法。update()svelte store 中的方法和方法到底有什么区别set()？

如何从另一家商店获取商店价值？ https://svelte.dev/repl/0ab80c2fb8e045958d844bd4b11c04a9?version=3.22.1

在示例中，我inputVal在stores.js文件中包含一个变量并在其中进行更改
set: (val) => {inputVal=val; set( val );}, and use in fn setToZero

问题：不使用变量如何直接实现inputVal？

我想知道我是否能够从一个普通的 .js 文件访问我的Svelte存储值。

我正在尝试编写返回基于存储值的动态值的函数，以将它们导入任何组件。但在一个普通的 .js 文件中，我不能只用 $ 符号访问存储值..

使用存储值并可用于多个组件的基本函数的快速示例：

//in .svelte

function add() {
    $counter = $counter + 1;
 }

编辑：改写一下

编辑： 找到了一个解决方案，但我真的不知道它是否真的优化了..

//in .js file

import { get } from "svelte/store";
import { counter } from "./stores";

export function add() {
    var counterRef = get(counter);
    counter.set(counterRef + 1);
}

我的一个组件订阅了商店中的一个变量。每当该存储变量发生变化时，我想触发一个函数。

商店.js

    import { writable } from "svelte/store"; 
    export const comparedProducts = writable([1,2,3]);

组件.svelte

    import { comparedProducts } from "../stores.js";
    
    //if there is a change in $comparedProducts trigger this function eg. ([1,2])
    const someFunction = () => {
      //do something
    }

$orderItems = writable([])更新Svelte 可写数组存储的正确方法是什么（或者差异，如果两者都正确） ？我们假设result我想在 的末尾推送一个新项目$orderItems。

orderItems.update(items => ([...items, result]))

或者

$orderItems = [...$orderItems, result]

我想知道是否可以输入自定义精简商店的美元符号值？

从这个例子来看：

应用程序.svelte

<script>
    import { count } from './stores.js';
</script>

<h1>The count is {$count}</h1>

<button on:click={count.increment}>+</button>
<button on:click={count.decrement}>-</button>
<button on:click={count.reset}>reset</button>

商店.js

import { writable } from 'svelte/store';

function createCount() {
    const { subscribe, set, update } = writable(0);

    return {
        subscribe,
        increment: () => {},
        decrement: () => {},
        reset: () => {}
    };
}

export const count = createCount();

{$count}如何使用自己的打字稿界面输入变量？

感谢您的帮助

Svelte 官方教程在其文档中使用了如此复杂的对象<svelte:self>

let root = [
    {
        type: 'folder',
        name: 'Important work stuff',
        files: [
            { type: 'file', name: 'quarterly-results.xlsx' }
        ]
    },
    {
        type: 'folder',
        name: 'Animal GIFs',
        files: [
            {
                type: 'folder',
                name: 'Dogs',
                files: [
                    { type: 'file', name: 'treadmill.gif' },
                    { type: 'file', name: 'rope-jumping.gif' }
                ]
            },
            {
                type: 'folder',
                name: 'Goats',
                files: [
                    { type: 'file', name: 'parkour.gif' },
                    { type: 'file', name: 'rampage.gif' }
                ]
            },
            { type: 'file', name: …

背景
我正在尝试使用 Svelte 和 Tauri 开发跨平台桌面应用程序。
当应用程序启动时，我需要将 settings.json 文件从文件系统加载到自定义 Svelte 存储中。
它需要是一个自定义存储，因为我必须在写入数据之前使用自定义设置函数验证数据。
存储将保存一个对象。

我使用的是常规 Svelte，而不是 Svelte-kit，因为不需要 SSR。

问题

1. Tauri 的 fs-api 中没有任何同步方法来读取文件
2. Svelte 似乎没有任何直观的方法可以找到这样做

测试

• 按照 Svelte 的 PromiseStore 示例，这适用于常规商店，但不适用于自定义商店，因为无法访问自定义设置方法
• 使用递归超时函数等待读取文件
• 使用 while 循环等待读取文件
• 尝试找到一种在 Svelte 初始化之前将数据加载到全局变量中的方法

示例
如果我要发布所有失败的尝试，那么代码将会很多，因此我将提供一个示例来说明我正在尝试实现的目标。
当 createStore 不是异步时，代码中的所有内容都有效，除了读取设置文件之外。

import { writable, get as getStore } from 'svelte/store'; // Svelte store
import _set from 'lodash.set';                            // Creating objects with any key/path
import _merge from 'lodash.merge';                        // Merging objects
import { fs } from '@tauri-apps/api';                     // Accessing local …

我的工兵应用程序围绕一个表组件。这个表组件具有我想在 URL 的查询字符串中表示的状态（偏移量、限制、排序、过滤器等）。

该表目前通过直接更新其状态可以正常工作：

<button on:click="{() => offset += limit}" disabled="{offset + rows.length >= count}">»</button>

我看到有页面只读存储可以让我访问查询字符串的当前值。我想我可以使用类似的东西URLSearchParams来生成更新相关值的链接。

有没有更好的方法来处理这个问题（某种直接将变量绑定到查询字符串的方法）？如果没有，用更新的查询字符串生成链接的最佳方法是什么？

编辑：

我目前的解决方案是以下功能：

<button on:click="{() => offset += limit}" disabled="{offset + rows.length >= count}">»</button>

我在一个a标签中引用了它，将上面的按钮替换为：

href="{getLink({'offset': (offset - limit)})}"

它有效，但我觉得应该有更好的方法

我对 sveltekit 和 svelte 不太熟悉，我正在尝试将数据从 API 加载到商店，这就是我的做法

    export const load = async ({ fetch }) => {
        const data = get(dataStore);

        if (browser && data) {
            return { status: 200 };
        }

        const res = await fetch('/data.json', { credentials: 'include', mode: 'cors' });
        const data = await res.json();

        if (browser) {
            dataStore.set(data);
        }

        return { status: res.status };
    };

我的问题是将 SSR 上的数据加载到 FE 存储的最佳方法是什么？