tags: ‘vue’, ‘vuex’

categories: ‘vue’, ‘vuex’

vue刷新页面后vuex store的state数据丢失的解决方案

产生原因
其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

解决思路
我们监听页面刷新事件，在刷新前将store中的数据存储到localStorage中。每次进入页面的时候先读取localStorage中的值并把它赋给store，这样就保留了刷新前的数据

解决方法
在 App.vue 添加如下代码

  1. <template>
  2.     <div id="app">
  3.         <router-view></router-view>
  4.     </div>
  5. </template>
  7. <script>
  8.     import store from '@/store/store';
  10.     export default {
  11.         store, // 引用
  13.         created () {
  14.             // 在页面加载时读取localStorage里的状态信息
  15.             if (localStorage.getItem("store") ) {
  16.                 this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
  17.             } 
  19.             // 在页面刷新时将vuex里的信息保存到localStorage里
  20.             window.addEventListener("beforeunload",()=>{
  21.                 localStorage.setItem("store", JSON.stringify(this.$store.state))
  22.             })
  24.             console.log(this.$store.state);
  25.         }
  26.     }
  27. </script>

参考文献

vue单页面应用刷新网页后vuex的state数据丢失的解决方案