标签: svelte-store

我正在从具有store某些属性的对象数组构建仪表板。每个商店都从不同的来源独立更新。

我的问题是我无法读取循环store内的值each。

为了简化以下代码示例，我使用tweened代替store

以下代码也可在 Svlete REPL https://svelte.dev/repl/9a17102e7d32471a940ba007e5b56db0?version=3.6.7

<script>
    import { tweened } from 'svelte/motion';

    const data = [{
        label: 'one',
        value: tweened(0)
    }, {
        label: 'two',
        value: tweened(0)
    }]

</script>

<ul>
    {#each data as item}
        <li>{item.label} ({item.$value})</li>
    {/each}
</ul>

该{item.$value}部分收益undefined

我想在任何给定时间读取精简的存储价值。我了解更新值时会调用 subscribe 方法。即使商店没有更新，我也想阅读商店。

只是一个基本问题：存储的 $ 语法是否适用于非组件 JavaScript 文件？

医生说：

每当您引用商店时，您都可以通过在组件中添加 $ 字符作为前缀来访问其值。

然而，这个官方示例似乎在不是组件的派生存储中使用 $-语法：

export const elapsed = derived(
    time,
    $time => Math.round(($time - start) / 1000)
);

这是定制店的特例吗？或者是否有可能因为它被导入到组件中？

SvelteKit / Svelte：无法从上下文模块中的“存储”获取或设置（读取或写入）值。

import {selectedStore} from "src/storelocation";

<script context="module">
  export const load = async ({params})=> {
    
     $selectedStore.value // throwing error
  }

互联网上的好心人大家好，

我为用户的滚动位置创建了一个侦听器： <svelte:window bind:scrollY={y} /> 我想将此变量保存在商店中，以便在整个网站上访问它。但为此我需要一个二传手。有没有一个好的高性能方法来做到这一点？

我尝试了这个，但它不起作用：

  $: () => scrollPos.set(y);
  $: console.log("LOG: scrollPos", $scrollPos);```

我有两家店：

export const custom_items = writable([]);
export const another_items = writable([]);

它们都有对象数组，对象看起来像这样（当然，值是不同的）：

{
    id: 123
    amount: 123
    price: 123
}

我想创建自己的派生变量，它将保存两个商店“custom_items”和“another_items”的总量。我怎样才能做到这一点？

我只能通过这段代码来做到这一点，但它不是反应性的：

function get_total_amount() {
    let total = 0;
    get(custom_items).every((item) => {
        total += item.amount;
    })
    get(another_items).every((item) => {
        total += item.amount;
    })
    return total;
}

一定有更好的方法，我听说过派生商店，但我不知道在这种情况下如何使用它。

从标题中可以清楚地看出，我只有一个简单的问题。Svelte 商店安全吗？

我用它来保存用户数据，例如自定义声明，如果有人可以将自己更改为管理员，那可能不会很好。

所以我的问题是：用户/黑客是否可以更改存储在 svelte 存储中的数据？我应该将敏感数据移出吗？

我有一个使用 ContextAPI 来管理身份验证的 React 应用程序，我正在尝试在 Svelte 中实现类似的功能。[Web 开发简化][1]

在Authenticate.js我有这个：

import React, { useContext, useState, useEffect } from "react"
import { auth } from "../firebase"

const AuthCt = React.createContext()

export function Auth() {
  return useContext(AuthCt)
}

export function AuthComp({ children }) {
  const [currentUser, setCurrentUser] = useState()
  const [loading, setLoading] = useState(true)

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  function logout() {
    return auth.signOut()
  }

  useEffect(() => {
    const unmount = auth.onAuthStateChanged(user => {
      setCurrentUser(user)
      setLoading(false)
    })

    return …

我正在学习 Svelte 教程，并且位于自定义商店页面 ( https://svelte.dev/tutorial/custom-stores )。示例代码是使用工厂函数编写的，createCount该函数会立即调用以创建导出的存储对象：

import { writable } from 'svelte/store';

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

    return {
        subscribe,
        increment: () => update(n => n + 1),
        decrement: () => update(n => n - 1),
        reset: () => set(0)
    };
}

export const count = createCount();

这样做的原因是什么，而不是像这样直接导出商店对象：

import { writable } from 'svelte/store';

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

export const count = {
    subscribe,
    increment: () => update(n …

我正在 Svelte 中创建一个 Store，它订阅值更改并将值存储在 localStorage 上。

打开页面时，有一个输入标签，其值绑定到商店。一切都按预期进行，刷新后最后一个值就在那里。

我的问题以及我不知道如何实现的内容（如果可能的话）打开同一页面的第二个选项卡，当我输入一个选项卡时，我想看到另一个选项卡上的值更新。

（我知道问题是第二个选项卡不知道 localStorage 更改）

我的黑客解决方案是间隔读取本地存储中的更新值，但这显然是一种黑客攻击，而不是解决方案。

我们该如何解决这样的事情呢？

这是所使用的 2 个文件的要点。https://gist.github.com/MrAmericanMike/b2ddea28e4a4716e43abe03c6211c8b7