Изменения состояния на стороне сервера в Nuxt исчезают при рендеринге

#javascript #vue.js #server-side #nuxt.js

#javascript #vue.js #на стороне сервера #nuxt.js

Вопрос:

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

  1. У меня есть проект Nuxt, который использует модульный магазин.
  2. У меня есть глобальное промежуточное программное обеспечение, которое запускается только на стороне сервера (имеется в виду при обновлении страницы).
  3. Это промежуточное программное обеспечение используется для проверки наличия файла cookie с пользовательскими данными, если это так, я делаю post-запрос в Firebase для оценки токена обновления и извлечения метаинформации пользователя (такой как отображаемое имя и т.д.). (Я также пробовал использовать nuxtServerInit, я получаю точно такую же проблему)
  4. Все это работает отлично. Он работает просто отлично, и, регистрируя все, что я знаю, он работает, и состояние изменяется.

В методе LoginUser() он устанавливает состояние приложения. (Значение токена и отображаемого имени). Когда я вхожу в систему через само веб-приложение, cookie-файл устанавливается правильно, а также состояние. Там хранится токен, а также отображаемое имя.

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

Мне не хватает конфигурации nuxt здесь? Должен ли я настроить определенный ключ, чтобы указать nuxt сохранять отображаемое хранилище на стороне сервера?

Есть ли у кого-нибудь опыт с этим? Если это так, пожалуйста, укажите мне правильное направление.

Комментарии:

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

2. Возможно, страница загружена, когда http-запрос еще не разрешен. Вы должны использовать ‘promise’ и ‘async’ / ‘await’, чтобы дождаться разрешения обещания / http-запроса в nuxtServerInit перед началом рендеринга страницы

3. У меня похожая проблема. Любой, кто разбирается в этом, был бы рад услышать от вас

Ответ №1:

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