解决vuex存储复杂参数(如对象数组等)刷新数据丢失问题

news/2024/7/24 13:36:31

 

我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果

尝试过几种方法之后最终采用vuex+sessionStorage结合的方法在mutations中

setResultValue(state,flag){
  sessionStorage.setItem("resultValue", JSON.stringify(flag))
  state.resultValue = flag
}

在getters中

getResultValue

getResultValue(state){
  state.resultValue = sessionStorage.getItem("resultValue")
  return state.resultValue
}

在跳转后的页面获取这个数据

this.resultValue = JSON.parse(store.getters.getResultValue)

这里可以看到我们用了JSON.stringify和JSON.parse是因为sessionStorage存储对象的需要,不然在页面获取时只能得到:“[object,object]”

 


http://www.niftyadmin.cn/n/1368216.html

相关文章

解决vue+webpack项目接口跨域问题

1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost) proxyTable: {/api: {target: http://10.xx.xx.xx:8080/renter-server, // 开发环境// target: http://10.xx.xx.xx:8080/renter-server, // 生产环境接口changeOrigin:…

Vue+elementUI表单正则校验

VueelementUI表单正则校验 数字校验 var checkNumber (rule, value, callback) > {if (value && value ! ){let regEn /^(\-|\)?\d(\.\d)?$/if (!regEn.test(value)) {callback(new Error(请输入数字))} else {callback()}} else {callback()} }2、正整数&…

vue-video-player实现实时视频播放(监控设备-rtmp流)

监控设备播放效果如下 1、vue项目安装vue-video-player npm install vue-video-player --save2、编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了,具体操作有注释) …

vue引入maptalks地图及聚合效果

1、安装maptalks.js npm install maptalks --save 2、安装聚合mapkercluster npm install maptalks.markercluster 3、vue页面引入 import * as maptalks from maptalks import {ClusterLayer} from maptalks.markercluster 4、初始化地图并添加聚合 mounted() {let tha…

vue项目中实现maptalks地图上弹框使用videojs播放实时视频rtmp流

不限制于vue项目,区别只是相关文件的引入 最终实现效果如下: 1、首先引入需要的资源:vue-video-player、maptalks相关 npm install vue-video-player --savenpm install maptalks --save 2、以vue cli3.0为例,在vue.conig.js文…

element-ui的el-select如何回显value对应的label值

写在这里只为一个记录,感谢原作者分享,原作者地址:https://segmentfault.com/a/1190000016737140?_ea4798728 原因是value的格式存在问题,数据库读取到的数据不一定为number或string类型 需要自己转换一下 总结: 显…

css-全屏背景图片

一般登录页首页都会做成一张背景大图铺满全屏,这种需求很多,但如何实现兼容一直困扰我。 暂时这种设置是我能使用的最好的方式,但还是会丢失部分图片元素,如果有更好的方法欢迎评论提出。 position: fixed; left:0; right:0; to…

vue+elementUI(el-upload)图片压缩,默认同比例压缩

这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大) 1、提取出压缩方法&#xf…