一.vuex设置保存全局变量
二.当前页面刷新后，当前页面设置的 vuex中的全局变量丢失，需要通过localstorage保存到本地，每次进入页面读取localstorage中的变量，赋值到当前页面

改进方案，在页面刷新之前，将vueX的值存储到localstorage中

要实现的功能

顶部菜单栏的各种警报异常的数量,要求每次通过websocket推送一条数据，数量加1，点击相应的菜单栏选项跳转到对应页面后，数量清0

功能分析

1.通过vueX管理全局变量

2.每次刷新之后，vueX的值又恢复到初始值，若每次vueX改变都将vueX的值存储到本地，则对于推动数据频繁或者不频繁的时候来说，都会对网页性能有影响，故 监听页面刷新之前的事件，在页面刷新前，再将全局变量暂存到本地的localStorage中

3.每次通过websocket推送数据时，进行数量+1，每次都要确保当前的值为最新的值，在created中判断，若localStorage的值不为空，则将localStorage的值付给全局 变量,localStorage只做暂存数据用，不参与运算

4.当数量为0时，清除小红点标记这里用到 监听vueX的值

暂时分析到这里 开始功能的实现

功能实现

1.vueX管理全局变量

1.添加VueX全局变量

在mutations中的方法，用 this.$store.commit(‘functionName’,value) 使用

在actions中的方法用 this.$store.dispath(‘functionName’,value) 使用

关于vueX的入手，这里有一篇很好的文章，十分钟上手vueX使用详解

2.使用VueX全局变量来管理菜单栏数量

vueX结合computed使用

3.监听VueX的值

2.刷新前的暂存事件

3.更改vueX的值实时改变菜单栏的数量

1.先判断当前是否有暂存数据，如果有则写入vueX，改变vueX中 各个的值，在操作之前确保当前新增的数量是最新的数据，且保证不出错

2.websocket推送一条数据，相应菜单栏加1

4.当数量为0时，清除小红点标记

在watch中监听了全局变量的值，但是第一次进入页面的时候却没有清除掉小红点标记，没有再深究，于是又在created中调用方法判断了一下，实现了功能。

本人才疏学浅，仅针对当前开发项目做的功能，如有不足还望指出！

参考网址：https://blog.csdn.net/aliven1/article/details/80743470
https://segmentfault.com/a/1190000015782272