Vuex结合storage实现用户信息本地存储

Vuex结合storage实现用户信息本地存储

自己学习的过程中遇到用户新的填写的页面，所以就想着页面每次刷新之后总不能一直填写，哇，累死，所以就想到了离线存储机制，这里使用的是good-storage封装库结合Vuex来实现这个功能，在此做个笔记。

1>首先 安装插件库good-storage

npm install good-storage

2>再你写离线存储逻辑部分的地方引入good-storage,盘它。呐~，呐~下面是我写的用户部分信息的存储逻辑

import storage from "good-storage"    //引入
const USER_DATAS="__userdatas__"      //定义键值

//用户信息存储，这里传入一个参数是个对象
export function saveUserData(obj){
	let userDatas=storage.get(USER_DATAS,{});   //获取存储的值，若没有，返回一个空对象
	if(obj.phone){
		userDatas.phone=obj.phone;
	}
	if(obj.name){
		userDatas.name=obj.name;
	}
	if(obj.sex){
		userDatas.sex=obj.sex;
	}
	if(obj.education){
		userDatas.education=obj.education;
	}
	if(obj.industry){
		userDatas.industry=obj.industry;
	}
	storage.set(USER_DATAS,userDatas);
	return userDatas;
}

//获取用户本地存储的信息，如果没有存储过，返回一个空对象
export function loaduserDatas(){
	return storage.get(USER_DATAS,{});
}

接下来是定义vuex的代码部分

state.js如下

import {loaduserDatas} from "common/js/cache"  //这里按照自己的路径引入进去

const state={
	user_datas:loaduserDatas()       //获取到用户信息
}
export default state

getters.js     映射state中的数据，方便在外部组建中引入数据

export const user_datas = state => state.user_datas;

mutation-types.js    

export const SET_USERDATA="SET_USERDATA"

mutaion.js提交修改之后的obj对象，即用户信息

import * as types from "./mutation-types.js"

const mutations={
	[types.SET_USERDATA](state,obj){
		state.user_datas=obj
	}
}
export default mutations;

actions.js    因为有可能同时修改多个用户信息内容，所以这里选择使用action进行异步操作，提交mutation

//同样按照自己的目录引入所需文件

import {saveUserData} from "common/js/cache"
import * as types from "./mutation-types.js"

export const saveUserDatas=function({commit},obj){
	commit(types.SET_USERDATA,saveUserData(obj))
}

再外部组件中的操作如下，我的文件是datum.vue

datum.vue

<script>
import {mapGetters,mapActions} from "vuex";

export default{
	 data() {
	    return {
	      dateStr:this.userName,
	      showDate:false,
	      nickName:"",
	      revise:false,
	      showNicknameMod:false,
	      userDatasObj:{
	      	name:"",
	      	phone:'18419954234',
	      	sex:'',
	      	education:'本科',
	      	industry:'互联网电子商务'
	      }
	    }
	  },

	  computed:{
	  	selectedDate(){
	  		return this.showDate ? this.dateStr : this.userName ;
	  	},
	  	_nickName(){
	  		if(this.revise){
	  			return this.nickName;
	  		}else{
	  			if( !this.user_datas.name){
	  				return "请输入昵称"
	  			} 
	  			else{
	  				return this.user_datas.name
	  			}
	  		}
	  	},
	  	_sex(){
	  		if(!this.user_datas.sex){
	  			return "请选择"
	  		}
	  		return this.userDatasObj.sex=this.user_datas.sex;
	  	},
	  	_selectEdu(){
	  		if(!this.user_datas.education){
	  			return "请选择"
	  		}
	  		return this.userDatasObj.education=this.user_datas.education;
	  	},
	  	_industry(){
	  		if(!this.user_datas.industry){
	  			return "请选择"
	  		}
	  		return this.userDatasObj.industry=this.user_datas.industry;
	  	},
        
        //获取到用户原来的信息，并进行相应的逻辑判断，看自己的情况哈。以上是我个人的
	  	...mapGetters([
	  		"user_datas"
	  	])
	  },
		methods:{
   			
    		savedInfo(){
    			this.saveUserDatas(this.userDatasObj);
    			
    		},

            //引入action中的提交信息操作，在保存信息的时候直接调用，传入信息对象参数
		  	...mapActions([
		  		"saveUserDatas"
		  	])
		},
	}




</script>

欢迎各位大神指正