标签: svelte-store

我正在创建一个使用对象来存储数据的商店。

我可以使用扩展运算符更新商店，但我也可以在不使用扩展运算符的情况下更新它。

Svelte 是否像 React 一样，我应该在更新对象的状态之前使用扩展运算符创建一个新对象，这样我就不会改变原始对象？

withSpreadOperator()或者withoutSpreadOperator()……这就是问题所在。

//stores.js

import { writable } from "svelte/store";

export const counts = writable({ n: 0 });

//App.js

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

  function withSpreadOperator() {
    count.update(o => {
      let x = { ...o };
      x.n++;
      return x;
    });
  }

  function withoutSpreadOperator() {
    count.update(o => {
      o.n++;
      return o;
    });
  }
</script>

<h1>The count is {$count.n}</h1>
<button on:click="{withSpreadOperator}">+</button>
<button on:click="{withoutSpreadOperator}">+</button>

我有一个包含以下数据的可写存储

   let array= writable({
                          skills: [{
                                    id: 1,
                                    name: "Wordpress",
                                    knowledge: 0.9
                                   }, 
                                   {
                                    id: 2,
                                    name: "Js",
                                    knowledge: 0.8
                                     } ]
                      })

我想根据知识对进度条进行动画处理，我在 {#each } 循环中访问知识，但进度条没有动画，因为我必须传递补间存储对象并设置它的值。那么如何为栏制作动画呢？如何将知识值传递给循环中的补间对象 set() 方法？

When testing svelte components, using jest & @testing-library/svelte, the state is shared between tests, is there away to tear down after each test so i have more isolated unit tests.

store/theme

import { writable } from "svelte/store";

export const LOCAL_STORAGE_KEY = "current:theme";

export const THEMES = {
  DARK: "dark",
  LIGHT: "light"
};

export const MATCH_DARK_THEME = "(prefers-color-scheme: dark)";

export const IS_USER_PREFERNCE_DARK =
  window.matchMedia && window.matchMedia(MATCH_DARK_THEME).matches;

export const DEFAULT_THEME =
  localStorage.getItem(LOCAL_STORAGE_KEY) || IS_USER_PREFERNCE_DARK
    ? THEMES.DARK
    : THEMES.LIGHT;

export const theme = …

相关REPL

我有一个带有自定义set方法的简单可写存储：

import { writable } from 'svelte/store';
function createState() {
    const {subscribe, set, update} = writable({a: 0, b: 0});
    return {
        subscribe,
        set: (newState) => {
            console.log(newState);
            // set(newState); // I would expect `state` to be unchanged without this
        }
    };
};

export const state = createState();

当我调用 时state.set(<some new value>)，新值会记录到控制台，而 的值state实际上并没有改变。这是我所期望的。
但是，如果我分配$state = <some new value>，state更改的值，然后 set将其记录到控制台。为什么（以及如何）会发生这种情况，有没有办法在不重新实现的情况下解决它writable？

谢谢！

我有几个 Svelte 组件和一个自定义可写存储。存储有一个init函数，async它用一些 REST API 的数据库表的数据填充存储的值。我的组件都必须使用自动订阅来订阅该商店。订阅时，init必须调用。总体想法是在数据库上实现 CRUD 操作，在存储上实现 CRUD 操作（有助于显示存储的值，即数据库的表，具有反应性）。

按init原样async，因此返回一个承诺，我需要await在我的组件中使用它。但由于我使用自动订阅（通过在商店名称前加上前缀$），我该怎么做？

例如：（App.svelte组件）：

<script>
    import { restaurant_store } from './Restaurant.js'
    export let name
</script>

<main>
    
    <!--- I need to handle the promise and rejection here -->
    {#each $restaurant_store as restaurant}
        <li>
            {restaurant.name}
        </li>
    {/each}
    

</main>

Restaurant.js（商店）：

import { writable } from 'svelte/store'

export function createRestaurantsStore() {
    const { subscribe, update } = …

我正在寻找一种方法来模拟 Svelte 组件中使用的存根存储，特别是使用自动订阅语法（即 或$myStore）$myStore.property。

我尝试了几种不同的模拟，主要遵循以下原则：

jest.mock('./stores/users', () => ({
  currentUser: jest.fn().mockImplementation(() =>
    writable({
      isAdmin: true,
    }),
  ),
}));

对于任何未定义的自动订阅的商店引用，测试都会出错。例如，如果我"../../stores/users"像这样从我的组件中引用商店......

{#if $user.isAdmin}
  <div>Hello I'm an admin</div>
{/if}

...然后我收到TypeError: Cannot read property 'isAdmin' of undefined

看来即使在模拟 Svelte 商店时，$自动订阅语法也没有破坏测试。我应该指出，在记录模拟存储时，存在预期的 Svelte 存储方法（ subscribe()、set()和），并且执行该方法也会按预期公开该属性。update()subscribe()isAdmin

我似乎找不到任何处理 Svelte 和商店使用的已建立的单元测试模式，因此有关该主题的任何和所有输入将不胜感激！

我在 SvelteKit 中有一个加载函数。它获取一些数据。

有没有办法可以在加载函数解析之前显示加载程序？或者有一些 SSG 会在 SSR 解决后更新？任何可以让流程更加顺畅的方法，而不是无法向用户返回反馈......

<script context="module">
        export const async load = ({ fetch }) => {
            const response = await fetch('https://dog.ceo/api/breeds/image/random')
            return {
                data: await response.json()
            }
        }
</script>

<script>
        export let data;
</script>

<img src={data.message} alt="Dog image" />

我想要一个加载程序直到加载完成或一些默认数据值直到加载完成以获得更好的用户体验。我不想将其移至 onMount，因为我想在 SSR 上调用 api。

我正在寻找初始 CSR 的组合，直到 SSR 加载完成。我希望这也适用于初始加载，而不仅仅是在导航时。

我正在通过创建简单的应用程序来学习 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 ... }

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

我有 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

我正在尝试创建一个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;