在主要对象中对不同商店进行分组的最佳方法 - Svelte

Question

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

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

    const bigObject = {
      counter,
      todos,
      randomFact 
    }

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

你们如何处理这种情况？

谢谢，

Answer 1

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

• 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 的 store 方法时，事情会变得有点复杂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 不会考虑“此单个属性已更改”，而是“整个对象已更改” ”。