Лучший способ сгруппировать разные магазины в главном объекте - Svelte

Question

Так что я пробовал немного Svelte на прошлой неделе. Я хотел иметь какой-то простой компонент, скажем, счетчик, которым будет управлять магазин (так же, как это показано в документации API). У меня также будет компонент для списка задач с его собственным хранилищем, и еще один, который снова будет выдавать случайные факты в своем собственном магазине.

Теперь я хочу иметь большой главный объект, что-то вроде:

    const bigObject = {
      counter,
      todos,
      randomFact 
    }

Я могу получить этот объект с начальными значениями из моих компонентов, но не могу сделать его реактивным, то есть, если я обновлю значение счетчика или запросю другой случайный факт, я хочу, чтобы bigObject обновлялся с этими значениями новостей...

Как вы, ребята, подходите к этой ситуации?

Спасибо,

Answer 1

Ответ довольно прост. Предположим, у нас есть два файла:

• bigObject.js который определяет ваш объект магазина,
• MyComponent.svelte который является компонентом 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.

Все становится немного сложнее, когда вам нужно определить методы хранилища, которые изменяют 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>

В заключение, имейте в виду, что когда вы изменяете какое-либо свойство объекта магазина, все компоненты, которые ссылаются на этот объект, будут обновлены, потому что Svelte не будет считать, что "это единственное свойство было изменено", а скорее "весь этот объект изменился. ".

Answer 2

ТЛ; др; Склады Svelte отлично подходят для небольших частей с реагирующим состоянием, но не являются заменой для крупных решений по управлению состоянием, таких как Redux.

Природа магазинов sveltes больше ориентирована на более мелкие элементы государственного управления. Я считаю, что такой пакет, как redux, будет лучше подходить для более масштабного управления состоянием.

Если у вас есть значения, которые составлены из нескольких частей состояния, вы можете использовать производное состояние. Я верю, что вы могли бы создать собственное хранилище для обработки больших состояний, но я не верю, что это действительно то, о чем вы просите, и это станет более сложным, чем решение, подобное избыточному.

Answer 3

Вы можете попробовать использовать Svelte Store. Подробнее об этом:

Документы: https://svelte.dev/docs

Учебное пособие: https://svelte.dev/tutorial/writable-stores

Я знаю, что это не полный ответ, и это должно быть указано в комментарии, но я пока не могу комментировать.