vuex刷新数据丢失的解决办法

布满荆棘的人生 2021-09-02 04:51 500阅读 0赞

通常在vue项目中使用vuex做全局的状态管理，但是**刷新之后，vuex中的数据会丢失**

因为store是存储在运行内存中，当浏览器刷新时，会重新加载vue实例，store也会重新赋值

通常将一些数据保存在localstorage、sessionstorage或cookie中，可以保证页面刷新数据不丢失且易于读取。

**vue项目一般操作都在同一个页面跳转路由，所以使用sessionstorage进行存储**

**1.vue项目刷新，app.vue会重新加载，在created中获取之前保存过的数据，使用vuex.store的[replaceState][]方法，替换store的根状态**

**2.在浏览器刷新前将store中的数据保存在sessionstorage**

created(){
          if (sessionStorage.getItem("store") ) {
            this.$store.replaceState(Object.assign({}, JSON.parse(sessionStorage.getItem("store"))))
          }
    
          window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
          })
        }

改变store中的数据，并刷新

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

也可以直接使用**[vuex-persistedstate][]**来保存状态(保存在localstorage)

npm install --save vuex-persistedstate

在store.js中添加两行配置

import Vue from 'vue'
    import Vuex from 'vuex'
    
    import createPersistedState from 'vuex-persistedstate'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
       //...
       plugins: [createPersistedState()]
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1][]

[replaceState]: https://vuex.vuejs.org/zh/api/#replacestate
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/45ce5a3ee0674294810e4e2b2183fe3f.png
[vuex-persistedstate]: https://github.com/robinvdvleuten/vuex-persistedstate
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1]: /images/20210813/72d7d9ad7727497b9c7b78bb6a93e1dc.png