Начало работы с государственным управлением в Still.js
programming state-management stilljs-state-management stilljs-global-state-managemen stilljs-services global-state-management what-is-state-management state-management-explained still-js

Начало работы с государственным управлением в Still.js

20 августа 2025 г.

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

Смотрите это видео для практической практики:YouTube видеоПолем

Следуйте официальной документации:Illce.js Service DocПолем

Присоединяйтесь к каналу Discord, если у вас есть дополнительные вопросы:Канал раздораПолем

По -прежнемупредоставляет различные способы обработки управления государством (компонент/локальное видео управления государством); Поэтому, когда дело доходит до глобального управления государством, он предоставляет встроенные функции, называемые услугами, что позволяет реагировать на вещи. Следуйте иллюстрации ниже о том, как она работает за кулисами:

Component 4 updates the store state, which is propagated to all subscribed components

Что такое сервис в Still.js?

Это часть в коде, помещенном в самый экстремальный слой с точки зрения архитектуры, что позволяет внешнему общению с помощью таких средств, как API/HTTP. Услуги также имели переменные ServiceEvent, которые объявляются следующим образом:

import { BaseService, ServiceEvent } from "../../@still/component/super/service/BaseService.js";

//This class will be places in the app/services/ folder
export class BiddingService extends BaseService {
    /** An array with a single country is being assigner */
    countryStore = new ServiceEvent(['Australia']);
}

ВПо -прежнему, все услуги должны расширять класс базового сервиса, чтобы быть инъецируемым в компоненты. Реактивные магазины должны использовать тип ServiceEvent. После создания услуги его следует вводить с использованием @Inject, а компоненты могут затем прослушать конкретные изменения данных из магазинов (например, CountryStore из вышеуказанного кода):

import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { BiddingService } from '../../service/BiddingService.js';

export class BiddingDisplay extends ViewComponent {

    isPublic = true;

    /** 
     * @Inject
     * @Path services/
     * @type { BiddingService } */
     bService;

     stAfterInit() {
          this.bService.on('load', () => { //Check service readiness
               //Bellow, it Subscribe to ServiceEvent variable (countryStore)
               this.bService.countryStore.onChange(newValue => {
                     console.warn(`New country entered the Bid, follow the list: `, newValue);
               });
           });
      }
}

В приведенном выше примере мы указываем путь (папку), где находится сервис, но это можно определить по всему миру на уровне приложения.

По -прежнемуИспользует управление реактивным государством на основе событий, где компоненты подписываются через событие OnChange. Любое изменение в государственных запусках уведомлений для всех подписчиков, независимо от того, откуда произошли изменения.

Получить ценность из сервиса довольно проста, так как нам нужно только указать магазин и положить значение в конце следующим образом:

getCountryInTheBid() {
    const countryState = this.bService.countryStore.value;
    console.log(`----> Country Store before updating: `, countryState);
}

Обновление магазина также является простой вещью; В некоторых случаях мы должны использовать некоторые промежуточные переменные. Это относится к спискам; Следуйте примерам:

addMoreCountry() {

  /** Retrieve the state */
  const countryState = this.bService.countryStore.value;

  /** Updating the store and re-assigning it to the service */
  countryState.push(‘Madagascar’);
  this.bService.countryStore = countryState;
}

Заключение

Не забудьте проверитьвидеоурокПолем

По -прежнемуИспользует управление реактивным государством на основе событий, которое упрощает настройку, требуя только услуг и магазины на основе услуг. Компоненты могут вводить их и реализовать свою собственную логику, в то время как любая централизованная логика может быть обработана в основном компоненте.

Увидимся в следующем 👊🏽

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE