vue 项目刷新页面, 保留当前页面状态

问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态
解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 localStorage/sessionStorage里存储

以登录信息为例:

1. 每次登录成功, 将用户名存进webstorage(根据具体需求去选择localStorage/sessionStorage)
2. 每次页面刷新后, 在页面的挂载(mounted)后, 都先尝试从webstorage去获取用户名
   * 若能获取到,则代表已登录过, 将用户名从webstorage取出赋给vuex中的变量, 渲染回页面 (那样F5刷新后，用户看到的页面还是刷新前的)
   * 若不能获取到(得到undefined) ,则代表没有登录过, 则取空值赋给vuex (页面则没有登录信息)
3. 退出登录 : 将vuex中保存的用户名设为空, 同时需要手动清除webstorage中储存的数据

1.vuex (index.js)中代码:

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

Vue.use(Vuex)

//创建存储对象Store,并导出
export default new Vuex.Store({
   
  //state负责:保存共享数据,供各个组件使用
  state: {
   
    uname:""
  },
  //mutations:专门负责: 写函数, 来修改state中的变量
  //注意:不能放异步,不能做ajax请求
  //第一个参数, 接到state,通过state.操作state里的变量
  //第二个参数,接到外部传递进来的数据  
  mutations: {
   
    setUname(state,uname){
   
      state.uname=uname;
    }
  },
  //actions:专门负责:发送异步ajax请求，从服务器端获取数据
  //context代表整个vuex对象
  //另外只能有一个参数,但要接可能不止一个值,所以可以以一个对象的形式接多组值
  actions