Создание store

Store в Slim.js представляет собой централизованное хранилище состояния приложения, которое позволяет компонентам обмениваться данными и синхронизировать изменения. Работа с store строится на принципах реактивности и однонаправленного потока данных.

Инициализация store

Для создания store используется функция Slim.store(). Она принимает объект с начальными данными состояния:

const appStore = Slim.store({
  user: {
    name: 'Иван',
    loggedIn: false
  },
  cart: []
});

В этом примере создаётся store с двумя ключами: user и cart. Эти данные будут реактивными — любые изменения в них автоматически отразятся в компонентах, которые подписаны на эти свойства.

Чтение и использование данных store

Компоненты Slim.js могут подписываться на store с помощью директивы :store или напрямую через ссылку на store:

class UserProfile extends Slim {
  get useStore() {
    return { appStore };
  }

  get template() {
    return `
      <div>
        <p>Имя пользователя: {{appStore.user.name}}</p>
        <p>Статус: {{appStore.user.loggedIn ? 'В сети' : 'Не в сети'}}</p>
      </div>
    `;
  }
}

Ключевой момент — реактивность данных. Если значение appStore.user.loggedIn изменится, DOM обновится автоматически без дополнительных вызовов рендеринга.

Изменение состояния

Для изменения состояния используется метод set() или прямое присваивание через реактивные свойства:

// С использованием set()
appStore.set('user.loggedIn', true);

// Прямое присваивание
appStore.user.name = 'Алексей';

Метод set() полезен при изменении вложенных объектов, так как обеспечивает корректное уведомление всех подписчиков store.

Работа с массивами

Store поддерживает реактивные операции с массивами, такие как push, splice и filter. Все изменения автоматически триггерят обновление компонентов:

appStore.cart.push({ id: 1, name: 'Товар 1', price: 100 });
appStore.cart.splice(0, 1); // удаление первого элемента

Методы массивов обернуты библиотекой так, чтобы Slim мог отслеживать мутации и обновлять DOM.

Подписка на изменения

Slim.js позволяет создавать функции-подписчики на изменения store с помощью метода subscribe:

const unsubscribe = appStore.subscribe((newState, oldState) => {
  console.log('Состояние изменилось', oldState, '->', newState);
});

// Отписка
unsubscribe();

Подписка позволяет реагировать на глобальные изменения состояния вне компонентов, что удобно для логирования или синхронизации с сервером.

Вычисляемые свойства (computed)

Slim.js позволяет определять вычисляемые свойства, зависящие от store, которые пересчитываются автоматически при изменении исходных данных:

class CartSummary extends Slim {
  get useStore() {
    return { appStore };
  }

  get totalPrice() {
    return appStore.cart.reduce((sum, item) => sum + item.price, 0);
  }

  get template() {
    return `<p>Общая стоимость: {{totalPrice}}</p>`;
  }
}

В этом примере totalPrice всегда будет актуальным, даже если добавлять или удалять элементы из cart.

Модульность и разделение состояния

Для больших приложений состояние удобно разделять на модули:

const userStore = Slim.store({ user: { name: '', loggedIn: false } });
const cartStore = Slim.store({ cart: [] });

const appStore = Slim.store({
  user: userStore,
  cart: cartStore
});

Это упрощает управление и тестирование, а также повышает читаемость кода.

Интеграция с компонентами

Store интегрируется с компонентами через директиву :store или через свойство useStore. Любой компонент, использующий store, автоматически реагирует на изменения данных, что обеспечивает единый источник истины в приложении:

class HeaderComponent extends Slim {
  get useStore() {
    return { appStore };
  }

  get template() {
    return `
      <header>
        <p>Пользователь: {{appStore.user.name}}</p>
        <p>Товаров в корзине: {{appStore.cart.length}}</p>
      </header>
    `;
  }
}

При добавлении нового товара в appStore.cart счетчик в шапке обновляется без дополнительного кода.

Резюме по возможностям store

  • Реактивность: любые изменения данных мгновенно отражаются в компонентах.
  • Централизация состояния: единая точка хранения данных для всего приложения.
  • Модульность: можно создавать несколько store для разных частей приложения.
  • Подписки: возможность реагировать на глобальные изменения данных.
  • Вычисляемые свойства: автоматическое обновление зависимых данных.

Использование store в Slim.js обеспечивает чистую архитектуру и упрощает управление состоянием, делая приложение предсказуемым и легко расширяемым.

Оглавление