storage用户信息本地存储
五颜六色的黑 人气:0自己学习的过程中遇到用户新的填写的页面,所以就想着页面每次刷新之后总不能一直填写,哇,累死,所以就想到了离线存储机制,这里使用的是good-storage封装库结合Vuex来实现这个功能,在此做个笔记。
首先安装插件库good-storage
npm install good-storage
在你写离线存储逻辑部分的地方引入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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容