vuex结合localstorage,vuex存储数据几种方式
这篇文章主要介绍了状态管理结合仓库实现用户信息本地存储方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
首先安装插件库良好的存储在你写离线存储逻辑部分的地方引入良好的存储接下来是定义状态管理的代码部分在外部组件中的操作如下自己学习的过程中遇到用户新的填写的页面，所以就想着页面每次刷新之后总不能一直填写，哇，累死，所以就想到了离线存储机制，这里使用的是良好的存储封装库结合状态管理来实现这个功能，在此做个笔记。
首先安装插件库good-storage
新公共管理安装货物-存储
在你写离线存储逻辑部分的地方引入good-storage
盘它。呐~,呐~下面是我写的用户部分信息的存储逻辑
从"正常存储区"导入存储区//引入
const USER _ DATAS= _ _ USER DATAS _ _ //定义键值
//用户信息存储，这里传入一个参数是个对象
导出函数saveUserData(obj){
让用户数据=存储。get(USER _ DATAS，{ })；//获取存储的值，若没有，返回一个空对象
如果（对象电话){
用户数据。电话=对象。电话；
}
if(obj.name){
用户数据。name=obj。姓名；
}
如果{
用户数据。性别=obj。性；
}
如果(对象教育)
用户数据。教育=obj。教育；
}
如果（工业)
用户数据。行业=obj。行业；
}
storage.set(USER_DATAS，用户数据)；
返回用户数据；
}
//获取用户本地存储的信息，如果没有存储过，返回一个空对象
导出函数loaduserDatas(){
return storage.get(USER_DATAS，{ })；
}
接下来是定义vuex的代码部分
状态。射流研究…如下
从" common/js/cache"//中导入{loaduserDatas}这里按照自己的路径引入进去
常量状态={
user_datas:loaduserDatas() //获取到用户信息
}
导出默认状态
getters.js映射状态中的数据，方便在外部组建中引入数据
export const user _ datas=state=state。user _ datas
突变类型。射流研究…
导出常量SET_USERDATA=SET_USERDATA
mutaion.js提交修改之后的目标文件对象，即用户信息
从导入*作为类型 mutation-types.js
常量突变={
【类型SET_USERDATA](state，obj){
state.user_datas=obj
}
}
导出默认突变；
actions.js因为有可能同时修改多个用户信息内容，所以这里选择使用行为进行异步操作，提交变化
//同样按照自己的目录引入所需文件
从"公共/js/缓存"导入{saveUserData}
从导入*作为类型 mutation-types.js
export const save user datas=function({ commit }，obj){
提交（类型SET_USERDATA，saveUserData(obj))
}
在外部组件中的操作如下
我的文件是datum.vue
datum.vue
脚本
从" vuex "导入{mapGetters，映射操作}。
导出默认值{
data() {
返回{
dateStr:这个。用户名，
showDate:false，
昵称：,
修改：假的，
show昵称Mod:false
userDatasObj:{
名称：,
电话："18419954234",
性别：,
教育：本科，
行业：互联网电子商务
}
}
},
计算值：{
selectedDate(){
退回这个showDate？这个。datestr:这个。用户名；
},
_nickName(){
如果(this.revise){
返回这个.昵称
}否则{
如果(!this.user_datas.name){
返回请输入昵称
}
否则{
返回这个.用户_数据.名称
}
}
},
_sex(){
如果(!this.user_datas.sex){
返回请选择
}
归还这个。userdatasobj。性=这个。用户数据。性；
},
_selectEdu(){
如果(!this.user_datas.education){
返回请选择
}
归还这个。userdatasobj。学历=这个。用户数据。教育；
},
_行业(){
如果(!this.user_datas.industry){
返回请选择
}
归还这个。userdatasobj。行业=这个。用户数据。行业；
},
//获取到用户原来的信息，并进行相应的逻辑判断，看自己的情况哈。以上是我个人的
.mapGetters([
用户数据
])
},
方法：{
savedInfo(){
this . save userdatas(this . userdatasobj)；
},
//在action中引入提交信息操作，保存信息时直接调用，传入信息对象参数。
.地图操作([
保存用户数据
])
},
}
/脚本
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。