3

所以在过去的一周里，我一直在尝试一些 Svelte。我想要一些简单的组件，比如说一个由商店管理的计数器（与 API 文档中显示的方式相同）。我还将有一个用于他自己商店的待办事项列表的组件，以及另一个将在他自己的商店中再次抛出随机事实的组件。

现在我想要一个大的主要对象，比如：

    const bigObject = {
      counter,
      todos,
      randomFact 
    }

我可以从我的组件中获取具有初始值的对象，但我无法使其具有反应性，这意味着如果我更新计数器值或请求另一个随机事实，我希望 bigObject 使用这些新闻值进行更新。 ..

你们如何处理这种情况？

谢谢，

4

3 回答 3

9

答案很简单。假设我们有两个文件：

  • bigObject.js定义您的商店对象，
  • MyComponent.svelte这是一个使用bigObject.

然后你可以通过这种方式实现你想要的：

  // bigObject.js
  import { writable } from 'svelte/store'
  export const bigObject = writable({
    counter: 0,
    todos: [],
    randomFact: "Svelte can be easy",
  })

  <!-- MyComponent.svelte -->
  <script>
    import { bigObject } from './bigObject'
  </script>

  <p>
    count is : {$bigObject.counter}
  </p>
  <button on:click={() => $bigObject.counter++}>
    Increment
  </button>

到目前为止，这再简单不过了。任何组件的更新都会在每个使用bigObject.

当您需要定义 mutate 的存储方法时，事情变得有点复杂bigObject。假设我们要创建一个setCounter将计数器设置为给定值的函数：

  // bigObject.js
  import { writable } from 'svelte/store'

  const { subscribe, set, update } = writable({
    counter: 0,
    todos: [],
    randomFact: "Svelte can be easy",
  })

  export const bigObject = {
    subscribe,
    set,
    update,

    setCounter: value => update(self => {
      // ... write all your function's code here
      // self is a reference to your object
      self.counter = value
      return self  //!\\ this is important! Don't forget it
    })
  })

  <!-- MyComponent.svelte -->
  <script>
    import { bigObject } from './bigObject'
  </script>

  <p>
    count is : {$bigObject.counter}
  </p>
  <button on:click={() => bigObject.setCounter(42)}>
    Set to 42
  </button>

最后一点，请记住，当您更改store 对象的任何属性时，引用该对象的所有组件都将更新，因为 Svelte 不会考虑“这个单个属性已更改”，而是“整个对象已更改” ”。

于 2020-05-14T16:38:13.470 回答
4

tl;博士; Svelte 存储非常适合小型反应状态块，但不能替代像 redux 这样的大型状态管理解决方案。

sveltes store 的性质更侧重于较小的状态管理。我相信像 redux 这样的包会更适合更大的状态管理任务。

如果您有由多个状态组成的值，则可以使用派生状态。我相信你可以创建一个自定义存储来处理更大的状态，但我不相信这真的是你所要求的，它会比像 redux 这样的解决方案更复杂。

于 2019-06-06T17:05:14.103 回答
0

您可以尝试使用 Svelte Store。更多关于：

文档： https ://svelte.dev/docs#svelte_store

教程： https ://svelte.dev/tutorial/writable-stores

我知道这不是一个完整的答案，这应该放在评论中，但我还不能评论。

于 2019-06-07T08:22:39.347 回答