La solution à la perte des données d'état de vuex après rafraichissement de la page web

Récemment, j'ai utilisé vuex pour la gestion globale de l'état dans le projet vue et j'ai constaté que lorsque la page Web est actualisée, les données stockées dans le magasin d'instance vuex seront perdues et l'affichage de la page sera également affecté.

raison:

Il est normal que les données de vuex soient perdues lors du rafraîchissement de la page. A l'intérieur, rafraîchissez la page du navigateur, et la mémoire précédemment demandée par la pile sera libérée. C'est le mécanisme de fonctionnement du navigateur, et les données dans le la pile sera naturellement effacée.

Solution:

première méthode

Enregistrez les données d'état dans localstorage, sessionstorage ou cookie.

// 在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
// 在beforeunload方法中将store.state存储到sessionstorage中。

export default {
  name: 'app',
  created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

Deuxième méthode

En utilisant vuex-persistedstate, il peut être stocké automatiquement.

télécharger:

npm install --save vuex-persistedstate

utiliser:

在store.js中引入
import createPersistedState from'vuex-persistedstate'exportdefaultnewVuex.Store({

  //配置plugins: [createPersistedState()]
})

La valeur par défaut est de stocker dans localStorage, nous pouvons également stocker dans sessionStorage, comme :

import createPersistedState from'vuex-persistedstate'exportdefaultnewVuex.Store({

  //配置plugins: [createPersistedState({
   storage: window.sessionStorage
  })]
})