Question

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

现在我想要一个大的主要对象，像这样：

    const bigObject = {
      counter,
      todos,
      randomFact 
    }

我能够从组件中获取带有初始值的对象，但是我不能使其具有反应性，这意味着如果我更新计数器值或请求另一个随机事实，我希望bigObject随这些对象一起更新新闻价值...

你们如何处理这种情况？

谢谢

Answer 1

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

bigObject.js定义您的商店对象，
MyComponent.svelte是使用bigObject的Svelte组件。

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

  // 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的每个组件中触发。

当您需要定义使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>

最后，请记住，当您更改商店对象的 any 属性时，所有引用该对象的组件都会更新，因为Svelte不会考虑“该单个属性具有已更改”，而是“整个对象已更改”。

Answer 2

您可以尝试使用Svelte Store。进一步说明：

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

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

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

Answer 3

tl; dr; Svelte商店非常适合小型反应状态零件，但不能替代redux等大型状态管理解决方案。

sveltes存储的性质更多地集中在状态管理的较小部分。我相信像redux这样的软件包将更适合于大型状态管理任务。

如果您的值是多个状态的组合，则可以使用derived state。我相信您可以创建一个自定义商店来处理更大的状态，但是我不相信这确实是您要的，它会比redux之类的解决方案更加复杂。

将主要商店中的不同商店分组的最佳方法-Svelte

3 个答案: