Vue前端开发过程中，难免缺少不了对某些复用性强的数据做一个全局的静态存储。最近在架构前端权限相关的代码时，脑瓜子猛的抽筋，想对比一下可以在VUE中使用的全局数据存储方法。
以本人使用过的存储方法为例进行说明：VUE全局存储数据可以使用四种方式。
一. 使用windows（storage）属性；
二. 使用VUE的prototype属性;
三. 使用js-cookie;
四. 使用VUEX的store插件;

一丶使用windows（storage）属性
好处：
1.使用方便且简单；
2.是一个key value形式的存储容器；
3.可以在vue的js模块任意处声明代码；
4.不需要声明任何插件或者引入packge;
不足之处：
1.IE8以上的浏览器才支持；
2.storage中的所有值都会被强制转换为String类型；
3.存储大小只有5m；

下面来介绍一下它的使用方式，使用场景：
使用方式只要在JS模块中写下两行代码就行了

// 设置key和value
localStorage.setItem("key", "value");
// 通过key获取值
localStorage.getItem("key");

localStorage还有一个比较短的小兄弟是sessionStorage，使用方式都是一样的，只不过他们两个本质上有着很大区别。身为哥哥的localStorage是长期且持久性的男人，弟弟sessionStorage是一次性且短的男人。
如果使用localStorage存储用户的相关信息时，客户端应该在退出登录的同时注销localStorage中的数据。
使用sessionStorage这不需要手动注销，在浏览器或窗口关闭以后会自动注销。

// 清除缓存
localStorage.clear();

博主在项目初期使用这种方式存储用户的基本信息，权限信息，菜单信息等等，但是随着业务的不断扩大windows（storage）已经完全满足不了楼主了，因为他的数据存储容量着实太小了。
使用建议：数据量小，安全性高，无法被爬虫，复杂数据类型不推荐。

二. 使用VUE的prototype属性;
VUE的prototype存储的是对象，使用方式也很简单，和上面说的localStorage非常相似，但是prototype中存储的数据过多或者过大会导致页面加载出现缓慢甚至卡死的现象。
使用方式：
在需要使用VUE的prototype的文件引入

//vue
import Vue from "vue";
// 设置变量
Vue.prototype["menurole"] = menurole;
// 在组件或元素中使用
<menu-role v-if='menurole'/>

三. 使用js-cookie;
如名字一样是使用cookie：key，value保存数据，有npm为我们封装好的插件js-cookie
我们直接在工具js文件中引入

// 引入
import Cookies from 'js-cookie'
// 设置值
Cookies.set('name', 'value');
// 取值
Cookies.get('name');
// 移除
Cookies.remove('name');

百度上还有很多cookie的骚操作及说明，想了解自行百度。

四. 使用VUEX的store插件;
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。所以极力推荐使用这个方式去存储数据，在vuex中声明的数据可以做到很好管理和维护，唯一不足的就是前期操作起来有些麻烦，本人比较懒，但为了后期不给自己挖坑还是耐住了性子去做这件事情。
一个完整的登录后保存用户信息模块如下

// 此处有一坑就是页面刷新后会初始化数据，这里解释使用办法。问题解决方式自行摸索
// store模式可以使用多层次多结构嵌套设计开发，每个层次都允许拥有自己的state,getters,mutations ,actions 
// 声明参数
// 在组件中调用 this.$store.state.name
const state = {
  name: '', //用户名
  roles: [] //权限
}

//获取state中的值，renturn处可以根据自己的业务需求对基础值做加工
// 在组件调用 this.$store.getters.nameInfo
const getters:{
    nameInfo(state){
        return "用户名:"+state.name
    },
    rolesInfo(state,getters){
        return '权限:'+state.roles
    }  
}

// 声名设置 state 的方法
// 在组件中调用this.$store.commit('SET_NAME', name)
const mutations = {
  // 用户名
  SET_NAME: (state, name) => {
    state.name = name
  },
  //权限
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}

//对外暴露的方法
// 在组件调用this.$store.dispatch('getInfo',data)
// 此处有涉及到一个异步处理方法Promise
const actions = {
  // 获取用户信息  
  // commit:传入提交修改当前mutations 中定义的参数设置方法
  // data 请求用户的参数
  getInfo({ commit},data) {
    return new Promise((resolve, reject) => {
      getInfo(data).then(response => {
        const { roles,name } = response
        //设置值
        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

//导出当前定义的参数
export default {
  state,
  mutations,
  actions
}