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 stategetters.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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论