vue全局变量 页面刷新时数据丢失问题

页面刷新后vue全局变量数据丢失

在开发中，我们需要将一些数据存到全局变量中，如用户的用户名等，便于页面展示，保存从服务器发送请求返回的数据，以避免在不同组件发送相同请求时，重复请求服务器。

方法一：保存在js文件中，然后全局引入挂载

common.js:

var typeOptions = []
const testConst = '我是常量'
export default {
  testConst,
  typeOptions
}

全局挂载:

import common from './store/common.js'
Vue.prototype.$global = common

在login.vue组件中登录成功后为它赋值

...登录成功后
this.$global.typeOptions = [...]

在需要的组件中第一次使用发现没有问题，并且console.log(this.$global.typeOptions)完全没毛病，重点来了!!!刷新页面后发现取不到这个数据了，再次console.log(this.$global.typeOptions)竟然为空！！

然而console.log(this.$global.testConst)发现可以取到这个值。

原因很简单，在页面刷新时，vue实例对象被重新构造，所有变量都被初始化。

结论：全局变量里的数据最好是const常量，才能在页面刷新后仍然可用。
（ps：在网上看到有这样的解决办法：监听页面刷新，在刷新前先将全局变量存到sessionStorge中，刷新完毕后用钩子函数再次将sessionStorge中的值赋给全局变量。但是个人不太推荐，下面有更直接的方法）

方法二：利用h5的本地存储

保存到localstorge或sessionstorge中，一般浏览器可以存5M（当然，也可以保存在cookies中，但是这种方法不推荐，容量小而且安全性差）
localstorge是永久存储在本地，除非手动删除。
sessionstorge是当前会话有效。
考虑vue是单页面应用，所有组件在同一个页面中跳转，所以sessionstorge最为合适。
因此，推荐使用sessionstorge
sessionstorge存取数据直接用setItem和getItem函数就行辣~~
（当然，如果不想被用户直接在控制台看到存储的信息，推荐第一种）