Всем привет. А поясните за nuxt + vuex-persistedstate. Выходит вот какая

Question

Всем привет. А поясните за nuxt + vuex-persistedstate. Выходит вот какая

классная история. За счет vuex-persistedstate я сохраняю state в localStorage. Удобно и просто, казалось бы но нет.

В случае с ssr получение данных может идти с небольшой задержкой. Из-за чего nuxt сначала отдает дефолтный state, который может хранить в себе старые / не актуальные / пустые данные. Из-за чего тут еще больший ор. Так как из-за того что в state могут быть пустые данные, он тригерится на "слыш, у тебя тут html отличается от того что я тут рисую, тебе бан или два?" и ломает UI.
В случае если отключить ssr вовсе, вроде как и ... смысл то тогда было nuxt юзать? 👀 Ну, разве что из-за почти готовой основы в виде автоподгружаемых компонентов, страниц, store и тд. Так вот, в случае если ssr отключен, такой проблемы нет, так как клиент получает уже всегда актуальные (из localStorage) данные. А не те которые по умолчанию в state прописаны.

К тому же, в случае если ssr и данные в state не пустые, а те что "по умолчанию" - возникает еще одна проблемка. У меня некоторые компоненты выводят как раз таки информацию из $store.state (vuex). Но, в этих же компонентах есть пара инпутов в которые пользователь должен будет вводить некоторые данные. Так как vuex store нельзя редактировать не из mutations. Мне приходится брать значение из state, копировать в виде нового объекта (чтобы я мог его изменять, так как vuex не даст изменить state объект). Только после того как я сделаю копию я смогу ее изменять и передавать в виде параметра для mutation функции (через this.$store.commit("module/myMutation", myNewObject)). А тут уже еще прикол.

Помните я говорил что данные nuxt получает сначала те что по умолчанию прописаны в state? Так вот, он сначала получает дефолтные значения, из-за чего в компоненте весят данные по умолчанию. Конечно, тут мой косяк, я получаю данные единожды и не имею возможности синхронизировать текущий state. Но я что-то не пойму как бы сделать так что бы я и мог одновременно получать новые изменения и изменять state.

Для вывода делать отдельный объект, для отображения использовать значения из store? Подскажите, кто знает. Попытаюсь скинуть весь нужный код, а то я чет задолбался со всем этим 👀

#nuxt.js #programming #russian #software

0

11.12.2021