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

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

目录

首先安装插件库good-storage

在你写离线存储逻辑部分的地方引入good-storage

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

在外部组件中的操作如下

自己学习的过程中遇到用户新的填写的页面,所以就想着页面每次刷新之后总不能一直填写,哇,累死,所以就想到了离线存储机制,这里使用的是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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读