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

蜗牛 互联网技术资讯 2022-04-29 31 0

这篇文章主要介绍“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实现用户信息本地存储”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注蜗牛博客网站,小编会继续努力为大家带来更多实用的文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论