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

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

尝试过几种方法之后最终采用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]”

以上这篇vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex页面刷新后数据丢失的方法

    1. 原因 (1)js代码是运行在内存中的,代码运行时的所有变量.函数都是保存在内存中. (2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值. (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage.Session Storage.Index DB等.这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储. 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据: (1)存储的数据是永久性的,永不过期: (

  • 使用vuex解决刷新页面state数据消失的问题记录

    在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. 言而总之: 实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该

  • vuex实现数据状态持久化

    用过vuex的肯定会有这样一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的. 所以我们通过 vuex-persistedstate这个插件,来实现将数据存储到本地 用法很简单 1. npm install vuex-persistedstate 2. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ modules:

  • Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的.怎么解决呢,我们可以结合本地存储做到数据持久化,也可以

  • VUEX 数据持久化,刷新后重新获取的例子

    VUEX 数据持久化 // store.js getters: { userInfo(state) { console.log('getters',state); if (!state.userInfo.id) { let token = getStorage("token"); console.log('token',token); if (token) { let userInfo = getStorage("userInfo"); state.userInfo

  • vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

    我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果 尝试过几种方法之后最终采用vuex+sessionStorage结合的方法在mutations中 setResultValue(state,flag){ sessionStorage.setItem("resultValue", JSON.stringify(flag)) state.resultValue = flag } 在getters中 getResultValue getResultValue(state){ stat

  • vue 数组和对象不能直接赋值情况和解决方法(推荐)

    Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers

  • 从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

    如下所示: Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers 今天遇到一个问题,将Vuex中数组的值赋给新的数组,新数组push时报上面的错误,代码如下 <code class="language-javascript">this.maPartListTable = this.$store.state.vehicleMa.maPartListTable; </

  • Mybatis传单个参数和<if>标签同时使用的问题及解决方法

    // Mapper.java EmerEvent selectByAlarmId(Integer alarmId); // Mapper.xml <select id="selectByAlarmId" resultMap="BaseResultMap" parameterType="java.lang.Integer"> select <include refid="Base_Column_List" /&

  • JSP中内建exception对象时出现500错误的解决方法

    本文实例讲述了JSP中内建exception对象时出现500错误的解决方法.分享给大家供大家参考,具体如下: 尝试使用JSP的内建exception对象,写了下面三个文件.思路很简单,文件index若提交字串为空,则get抛出异常,交由error.jsp处理.但实际却不能正常运行,会出现IE的500错误页面.环境为Tomcat 5.5,IE6.0. 在sun的论坛上有人贴出了原因,是IE的某个设置.Tomcat5.0以后的版本error page在处理时会返回error code 500.而IE

  • C#提示：“在证书存储区中找不到清单签名证书”的解决方法

    本文实例讲述了C#提示:"在证书存储区中找不到清单签名证书"的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 程序重新生成,提示错误:在证书存储区中找不到清单签名证书. 二.解决方法: 可能是之前部署的程序证书被我删掉了或是证书过期了,结果出现这个问题.解决方案如下: 方案1:右击项目属性->签名->为ClickOnce清单签名,将勾掉的选项去掉. 方案2:在签名中创建一个新的签名. 方案3:记事本打开相应的csproj文件,调整节点值.<SignMani

  • 基于php双引号中访问数组元素报错的解决方法

    最近在做微信公众号开发,在一个发送图文接口中,需要把数组元素拼接在XML字符串中 foreach ($itemArr as $key => $value){ $items .= "<item> <Title><![CDATA[$value['title']]]></Title> <Description><![CDATA[[$value['description']]]></Description> <

  • VUEX采坑之路之获取不到$store的解决方法

    今天在写vuex的时候遇到了一个特别无语的问题,找了半个小时才找到这个问题,所以贴出来,大家在遇到和我一样的问题的时候不会太过慌张 在第一次写vuex的时候无论如何获取不到$store,后来找了好久才发现是我给全局VUE注入的时候注入的是Store而非store 这一个字母之差看上去可能没什么问题,可就是获取不到全局的$store; 代码奉上 // The Vue build version to load with the `import` command // (runtime-only o

  • vuex刷新后数据丢失的解决方法

    导语: 我们在写vue项目的时候,经常要用到vuex作为内存来储存,但是我们存放在vuex中的数据(用户数据,当前页面的数据等等)在刷新后就会丢失,那么如何解决呢?超级简单. 1,安装vuex-persistedstate npm install --save vuex-persistedstate 2,修改store import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ sta

  • springmvc参数为对象,数组的操作

    目录 参数为对象 1.提交表单 2.表单序列化,使用ajax提交 3.也可以这样写 4.如果结构复杂,使用@RequestBody 5.传递数组 springmvc接受复杂对象(对象数组) 前端: 后端: @RequestBody和@RequestParam的区别 参数为对象 1.提交表单 2.表单序列化,使用ajax提交 var data = $("#addForm").serialize(); $.ajax({ url : "addReportDo", //请求

随机推荐