Лучшее решение для подгрузки data перед гидрацией в однокомпонентном приложении без store?

Question

[LionG]

Пока использую так: при создании приложения через provide передаю INITIAL_DATA, а в компоненте приложения:

data() {
  return Object.assign({
    count: 5
  }, this.INITIAL_DATA ?? {})
}

Answer 1

[Дима Паутов]

Да нет особого лучшего решения.

Первый вопрос, у вас приложение - это 1 компонент, т.е. условный App.vue, что и куда вы провайдите?
provide - это возможность пробросить данные от родителя к ребёнку. А где тут родитель, если компонент 1?

Приведите более подробно код, что происходит у вас. Если вам нужно просто объединить 2 объекта, дефолтные значение и новые значение, ваш вариант тоже подходит. Я бы вообще создал отдельную модель, в которую пробрасывал входящие данные. Так хотя бы ясно, какие поля будут использоваться.

Comments

[LionG]

При создании приложения через createApp возвращается "приложение", оно поддерживает метод provide и провайдит данные в компонент App.vue например.

Упрощенный вариант такого приложения - отрисовка виджета рейтинга со звездами (принимается count и в html звезда повторяется заданное кол раз + доп логика что бы не все так просто было в виде дорисовки половинчатых и пустых звезд). Для SEO виджет проходит SSR где ему нужно сказать что он должен отрисовать 4 звезды. Во время гидрации на клиенте тоже нужно указать кол звезд. На сервере INITIAL_DATA в SSR приходит через ctx и добавляется в html результат с помощью JSON, на клиенте для гидрации INITIAL_DATA берется через getInitialJSON из JSON со страницы либо остается пустым.

import Stars from '@components/Stars.vue'
async (ctx) => {
  let app = createApp(Stars)
  app.provide('INITIAL_DATA', ctx.INITIAL_DATA ?? await getInitialJSON('widget_X_INITIAL_DATA') ?? {})
  return { app }
}

[LionG]

Можете показать пример использования модели данных ? С учетом что у разных виджетов может быть общий JSON с набором данных. Некоторые виджеты могут использовать как свои ключи, так и общие с другими виджетами. Согласен что в данной конструкции в виджеты будут попадать лишние данные)

Скорее всего нужен тот же Object.assign но объединяющий только разрешенные ключи. А значит отфильтровать INITIAL_DATA по ключам из data по умолчанию и что бы их не повторять, наверное нужно вынести отдельный метод который будет принимать 2 аргумента: data по умолчанию + INITIAL_DATA.

[Дима Паутов]

LionG, Ну, самый простой пример:

// BaseWindgetModel.js

class BaseWidgetModel {
  constructor (data) {
    this.name = data.name || null;
    this.count = data.count || 0;
    //... Какие иные общие поля
  }
}

class WidgetStars extends BaseWidgetModel {
  constructor (data) {
    super(data);
    
    this.prop1 = data.prop1 || null;
    this.prop2 = data.prop2 || null;
    this.prop3 = data.prop3 || null;
    //... Какие иные поля
  }
}

class WidgetSuperStars extends BaseWidgetModel {
  constructor (data) {
    super(data);
    
    this.prop1 = data.prop1 || null;
    this.prop2 = data.prop2 || null;
    this.prop3 = data.prop3 || null;
    //... Какие иные поля
  }
}

Ну а дальше:

async (ctx) => {
  const app = createApp(Stars);

  const data = await getInitialJSON('widget_X_INITIAL_DATA');

  const widgetData = new  WidgetStars(data);

  app.provide('INITIAL_DATA',  widgetData);

  return { 
    app 
  };
}

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