本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、前言

vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新；
但vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。如果此时用户已经登录了，但我把登录状态放到state中了，一刷新页面，还要重新登录，购物车里的添加的数据，一刷新要重新添加--这肯定会影响我们上帝操作的
vuex存取值一般都是放在computed计算属性中，但是一刷新页面的数据就没了

computed:
	insureDatalist(){
		return this.$store.getters.getinsureDatalist;
	},
	orderData()
	{
		return this.$store. getters.getorderData;
	},
	payData(){
		return this.$store.getters.getpayData;
	}
},

二、解决方案

方案一

实现原理监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。
代码实现

    //全局监听，页面刷新的时候将store里state的值存到sessionStorage中，然后从sessionStorage中获取，再赋值给store。然后再把session里面存的删除即可，相当于中间件的作用。
 //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
      sessionStorage.removeItem("store")
    }

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

方案二

插件实现使用vuex持久化 vuex-persistedstate 教程传送门

1、简介

vuex刷新丢失的监听写法 vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，但是有时候我们并不希望如此。例如全局相关的登录状态、token、以及一些不常更新的状态等，我们更希望存储到本地，减少无用的接口访问，提升用户体验；

2、插件安装

npm i -S vuex-persistedstate

3、配置使用

在vuex初始化时候，作为组件引入

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

4、自定义存储方式

vuex-persistedstate默认使用localStorage来固化数据，一些特殊情况要如何应对呢？（如：safari的无痕浏览模式）

需要使用sessionStorage的情况

plugins: [
    persistedState({ storage: window.sessionStorage })
]

使用cookie的情况

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

5、参考资料

vuex-persistedstate的github js-cookie的github

Vuex刷新页面导致数据丢失解决办法---kalrry