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

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

这篇文章主要介绍“Vuex怎么结合storage实现用户信息本地存储”，在日常操作中，相信很多人在Vuex怎么结合storage实现用户信息本地存储问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vuex怎么结合storage实现用户信息本地存储”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

首先安装插件库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>

到此，关于“Vuex怎么结合storage实现用户信息本地存储”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注高防服务器网网站，小编会继续努力为大家带来更多实用的文章！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[