vuex结合sessioStorage存储用户信息

登录状态保存

应用场景，一般用户登录之后会从登录注册变成欢迎你，用户名这里用个v-if就可以了，不说这个，这个用sessionStorage可以存储，如果不用vuex的话直接在登录组件中点击登录方法之后
sessionStorage.setItem(“user”, “res.data.user”);
在需要使用的地方sessionStorage.getItem(“lastname”);就可以了，
vuex内保存sessionStorage先说一下流程
1）在登录界面中

		接收后台传过来的数据并赋值
		var user_msg=res.data.user; 
		//调用gologin 去改变store中的数据，调用gologin方法，commit提交
		 this.$Store.commit('gologin',user_msg)

2）在stour的index.js中写了俩个对象，一个用来存user，一个用来存session，

      //在gologin方法中赋值的同时定义数据的时候也需要赋值一次session，不然会导致刷新网页之后你的session存在但是不会显示出来，
      user_session:sessionStorage.getItem("user"),
	  user:'',

 需要一提的是sessionStorage只能存字符串，像对象之类的复杂数据需要用JSON对象的stringify和parse来处理，在这里我把对象用stringify序列化成string类型的字符串，之后用的时候会再进行处理
 

mutations :{
	  //登录改变user状态
	gologin(state, user_list){	
	     var user=JSON.stringify(user_list);
	     sessionStorage.setItem("user",user);	 
        state.user_session=sessionStorage.getItem("user");		 
		state.user=user_list;		
	},
	//退出 该表状态
	goquit(state){
		sessionStorage.clear();
		state.user_session='';
		state.user='';
	}
},

做完这些就可以把一个用户对象和session存在了vuex中，使用过vuex的都配置$ Store在main.js中，所以用的时候直接$ stroe.state就可以获取了，但是每个需要用到的地方都获取一次store而且还要使用提到的parse来转成对象很复杂，所以提取了一个公共方法，fun（）{ }
另起一个fun.js文件并且在main.js中定义

import fun from './fun.js'

Vue.prototype.$comon= fun

这样就可以this.$comon来调用fun.js了
在fun.js中的代码编辑如下

import store from './store/index'	 
	var fun = {
		user() {  
                if((store.state.user_session)!=' ')
				{
				return JSON.parse(store.state.user_session);
                }else {
					return store.state.user_session;
				} 
            }	
	}	
export default fun;

这里的一个判断逻辑主要是为了解决一个报错问题，如果用户退出了登录，则会报错，其实else不传也可以，
vuex结合sessioStorage存储用户信息
这样就完成所有的代码编辑了
在组件中使用的时候

date (){
return{
 user: '',
}
},
created(){
	
	this.user=this.$comon.user()
	
}

就可以获取user的session了
当然由于在上面代码中多定义了一个user在vuex中
也可以this.$store.state.user获取用户信息不过不是session存储的。

vuex结合sessioStorage存储用户信息

登录状态保存

相关推荐