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: {
    login(context,user){
      (async function(){
        var result=await axios.get("user/login",{params:user});
        var code=result.data.code;
        if(code==200){
          //将登录成功后的获取到的用户名,传递给mutations中的setUname方法中的参数uname
          context.commit("setUname",(result.data.data[0]).uname)
        }
      })()    
    }
  },
  modules: {
  }
})

2.登录组件 (MyLogin.vue)中代码:

//引入Vuex提供的一个工具函数{mapActions} 
import {mapActions} from 'vuex'

export default {
  data(){
    return{
      uname:"",
      upwd:""
    }
  },
  //注意:::methods里自己方法 和 从Vuex拿过来的方法不能重名,重名会发生替换
  methods:{
    mylogin(){
      //调用,从vuex的actions里面提供的,login函数
      //并传递了一个对象(登录的用户命名和密码), 给user
      this.login({loginUname:this.uname,loginUpwd:this.upwd}).then(()=>{
        if(confirm("是否记住登录密码")){
          localStorage.setItem("uname",this.uname)
        }else{
          sessionStorage.setItem("uname",this.uname)
        }
      })
    },
    //mapActions会将你想要的所有函数,以一个对象的形式给你
    //想要直接使用的话,需要用"..."打散
    ...mapActions(["login"]), 
     /* ...mapActions(["login","logout","registor"])
      * 去vuex的actions中取出名为"login","logout","registor"的函数放到此地
      * 取出来后,就相当于这里,有login(),logout(),registor()函数
      * login(user){ this.$store.dispatch("login",user)},
      * logout(){ ... },
      * register(){ ... }
     */
  }
}

3.验证登录以及退出登录的组件 (MyHeader.vue)中代码:

//引入Vuex提供的2个工具函数
import {mapState,mapMutations} from 'vuex'

export default {
  computed:{
    //从vuex中state中拿到的变量,放在应用组件的计算属性中
    //相当于:this.$store.state.uname
    ...mapState(["uname"])
  },
  methods:{
    logout(){
      //调用从vuex中Mutations中拿到的setUname方法,将state里的uname清除
      //相当于:setUname(uname){ this.$store.commit("setName",uanme) }
      this.setUname("");
      //清除浏览器缓存
      sessionStorage.clear();
      localStorage.clear();
    },
    ...mapMutations(["setUname"]),
  },
  mounted(){
    //组件挂载后,尝试从浏览器存储中获取数据
    var uname=sessionStorage.getItem("uname")||localStorage.getItem("uname");
    //如果能获取到,则代表登录过,直接将获取的值赋给vuex中的变量;若没有获取到就取空值,则没有登录
    this.setUname(uname||"")
  }
}