A solução para a perda de dados do estado vuex após atualizar a página da web

Recentemente, usei vuex para gerenciamento de estado global no projeto vue e descobri que, quando a página da Web é atualizada, os dados armazenados no armazenamento de instância vuex são perdidos e a exibição da página também é afetada.

razão:

É normal que os dados do vuex sejam perdidos quando a página é atualizada. Dentro, atualize a página do navegador, e a memória solicitada anteriormente pela pilha será liberada. Esse é o mecanismo de funcionamento do navegador, e os dados no pilha será naturalmente apagada.

Solução:

método um

Salve os dados de estado em 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))
    })
  }
}

Método dois

Usando vuex-persistedstate, ele pode ser armazenado automaticamente.

download:

npm install --save vuex-persistedstate

usar:

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

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

O padrão é armazenar em localStorage, também podemos armazenar em sessionStorage, como:

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

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