解决页面刷新，vuex的数据丢失

     Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式管理存储管理应用的所有组件的状态。但是当刷新页面的时候，保存在Vuex实例store的数据会丢失。

    原因就是：

因为store里的数据是保存在运行内存中，当页面刷新时，页面会重新加载Vue实例，store里面的数据就会被重新赋值初始化。

    解决方法：

方法一：

将state的数据保存在localstorage,sessionstorage或cookie中。

• 在页面刷新前将数据存储到sessionstorage中，使用beforeunload事件，该事件在页面刷新前触发：

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

export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("state") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("state"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("state",JSON.stringify(this.$store.state))
    })
  }

localStorage,sessionStorage,cookie三者的区别：

• localStorage： localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
• sessionStorage： sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
• cookie： cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。

方法二：

    使用vuex-persistedstate,可以自动存储。

• 下载:

npm install --save vuex-persistedstate

• 使用

在store.js中引入
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({

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

默认的是存储到localStorage里的，我们也可以存到sessionStorage中，如：

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({

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