Nano Hash - криптовалюты, майнинг, программирование

Данные Nuxt, Vuex очищаются при обновлении браузера

У меня есть приложение, использующее Nuxt во внешнем интерфейсе. Поскольку Nuxt - это технология SSR, данные в хранилищах vuex удаляются после обновления браузера. Есть ли способ сохранить и сохранить данные vuex в хранилище браузера (желательно не cookie-файлы) даже после обновления браузера?

javascript vue.js nuxt.js vuex local-storage
25.02.2021

  • данные локального хранилища никогда не удаляются при обновлении браузера. А также vuex не сохраняет данные в localStorage автоматически. 25.02.2021
  • Состояние вашего Vue и тот факт, что Nuxt является SSR, никак не связаны. Когда вы обновляете любое обычное приложение VueJS, состояние исчезает, поэтому вы удаляете все данные со страницы (и, следовательно, Vuex). 25.02.2021

Ответы:


1

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

Но вы, вероятно, не должны этого делать, вы можете создать ошибку, от которой ваш пользователь не сможет избавиться, обновив. И это действительно расстраивает.

Схема для этого довольно проста.

Во-первых, в vuex подпишитесь на все мутации

https://vuex.vuejs.org/api/#subscribe

const unsubscribe = store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

// you may call unsubscribe to stop the subscription
unsubscribe()

Проверьте, какие мутации вы хотите сохранить, и сохраните их в localStorage, IndexDb или в любом другом месте.

При загрузке страницы вам необходимо проверить свое хранилище для этих данных. Если он существует. вызов replaceState https://vuex.vuejs.org/api/#replacestate

store.replaceState(state: Object) // give it an object structure matching your Vuex module state structure

И вот как вы можете сохранить и перезагрузить состояние.

25.02.2021

2

Мы используем vuex-persist, чтобы сохранить некоторую информацию о магазине в indexDB для обеспечения автономной функции (PWA), но вы также можете использовать локальное хранилище и файлы cookie. Его довольно удобно использовать, а также есть реализация nuxt:

// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }
  ]
}

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  new VuexPersistence({
  /* your options */
    key: 'vuex', // The key to store the state on in the storage provider.
    storage: window.localStorage, // or window.sessionStorage or localForage 
  }).plugin(store);
}
25.02.2021
  • Вы можете столкнуться с ошибками рендеринга, так как клиент отрисовывает иначе, чем сервер, который выдается клиентской стороной vuex persist 21.07.2021

    • 3

    Вы не можете сохранить свое состояние Vuex без какого-либо хранилища браузера. В зависимости от того, что вам нужно хранить, вы можете использовать:

    • localStorage, если это небольшая информация, некоторые настройки или одинаково
    • сделайте вызов API на свой бэкэнд и соответствующим образом повторно заполните свой магазин Vuex (лучшее решение, особенно если вы сохранили некоторый токен JWT в своем localStorage)
    • IndexedDB API, никогда не использовал, но это какой-то свет база данных

    Тем не менее, сохранение всего вашего состояния Vuex не является делом в браузере по разным причинам (безопасность, производительность, принцип и т. Д.).

    25.02.2021
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..