Vuex реализует постоянство данных, решение проблемы потери данных браузера обновления данных

внешний интерфейс Vuex

Данные в магазине Vuex хранятся в запущенной памяти. Когда страница обновлена, страница будет перезагружать экземпляр Vue, а данные в Vuex будут переназначены, что приведет к тому, что проблема потери данных на странице обновления Vuex Отказ Как решить проблему браузера Обновить данные потери данных?

Способ 1: Глобальный мониторинг.При обновлении страницы значение состояния в хранилище сохраняется в sessionStorage, затем получается из sessionStorage, после чего присваивается хранилищу, а данные в sessionStorage удаляются. Добавьте следующий код в app.vue:
 created() {
    window.addEventListener('beforeunload',()=>{
       sessionStorage.setItem('list', JSON.stringify(this.$store.state))
    })
    
    try{
      sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('list'))))
    }catch(err) {
      console.log(err);
    }
  
    sessionStorage.removeItem("list");
  }

注意!!! storage 只能存储字符串的数据，对于 JS 中常用的数组或对象不能直接存储。但我们可以通过JSON 对象提供的 parse 和 stringify 方法将其他数据类型转化成字符串，再存储到storage中就可以了。

Способ 2. Установите плагин vuex-persistedstate.
1. npm install vuex-persistedstate -S //安装插件
2. 在 store/index.js 文件中添加以下代码：
import persistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
 state:{},
 getters:{},
 ...
 plugins: [persistedState()] //添加插件
})

注意!!! vuex-persistedstate 默认使用 localStorage 来存储数据，若要实现无痕浏览该如何实现呢？

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

plugins: [
    persistedState({ storage: window.sessionStorage })
]
Категории