解决Vue F5强制刷新丢失信息

导语

最近在为练手项目拓展功能，刷新界面时发现菜单栏会丢失。试了几个钩子函数都不可以有效解决，查阅了资料后决定用Vue的VueX解决这个问题。

Vuex配置

安装

npm install vuex --save

配置VueX

在src路径下创建store文件夹，然后创建index.js文件

详细内容.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    menu:JSON.parse(sessionStorage.getItem("menu"))
  },
  mutations: {
    SET_MENU:(state,menu) =>{
      state.menu = menu
      sessionStorage.setItem("menu",JSON.stringify(menu))
      
    },
 
    REMOVE_INFO:(state) =>{
      state.menu='';
      sessionStorage.setItem("menu",JSON.stringify(''))
    }
  },
  getters:{
    getMenu:state => {
      return state.menu
    }

  },
  actions: {
  },
  modules: {
  }
})

之后需要在main.js引入 

 配置结束

使用

把返回的数据存入

之后在created()中取出赋值

menuList是菜单栏的数据

这里只是提供一种思路，有不足之处还请指正。