vuex刷新后数据丢失的解决方法
导语:
我们在写vue项目的时候,经常要用到vuex作为内存来储存,但是我们存放在vuex中的数据(用户数据,当前页面的数据等等)在刷新后就会丢失,那么如何解决呢?超级简单。
1,安装vuex-persistedstate
npm install --save vuex-persistedstate
2,修改store
import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ state: { user: {}, //用户 }, mutations: { update_user(state, newuser) { state.user = newuser }, }, //把所有数据缓存到本地 plugins: [createPersistedState()], }) export default store;
保存后,再运行程序,刷新后vuex中的数据就不会丢失了。
总结
到此这篇关于vuex刷新后数据丢失解决的文章就介绍到这了,更多相关vuex刷新数据丢失的解决内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
相关推荐
-
vuex页面刷新后数据丢失的方法
1. 原因 (1)js代码是运行在内存中的,代码运行时的所有变量.函数都是保存在内存中. (2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值. (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage.Session Storage.Index DB等.这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储. 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据: (1)存储的数据是永久性的,永不过期: (
-
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果 尝试过几种方法之后最终采用vuex+sessionStorage结合的方法在mutations中 setResultValue(state,flag){ sessionStorage.setItem("resultValue", JSON.stringify(flag)) state.resultValue = flag } 在getters中 getResultValue getResultValue(state){ stat
-
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
-
vue下history模式刷新后404错误解决方法
本文介绍了vue下history模式刷新后404错误解决方法,分享给大家,具体如下: 官方说明文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80> #Created by linvic on 2018-05-24 Serveradmin 674
-
Oracle监听器被优化大师挂掉后的完美解决方法
Oracle监听器被优化大师挂掉后的解决方法: 在启动oracleorahome90tnslistener服务 时出错,信息: 在本地计算机无法启动oracleorahome90tnslistener服务, 错误3:系统找不到指定路径. 我在网上查资料后,发现一般这些文件的位置由注册表的 ORACLE_HOME 变量决定. 先看一看注册表中 HKEY_LOACL_MACHINE/ SOFTWARE/ORACLE 下的 ORACLE_HOME值 如果没有这个值 ,那你一定要添加进去. ORACLE
-
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use
-
easyui window refresh 刷新两次的解决方法(推荐)
这样写刷新两次 $("#windowid").window('refresh','url01.php'); $("#windowid").window('open'); 这样写刷新一次 $("#windowid").window('open'); $("#windowid").window('refresh','url01.php'); 以上这篇easyui window refresh 刷新两次的解决方法(推荐)就是小编分享
-
引用jquery框架后出错的解决方法
问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript" src="resources/js/jquery/jquery-1.9.1.min.js" /> 改为如下的引用方式 <script type="text/javascript" src="resources/js/jquery/j
-
ASP.NET防止页面刷新的两种解决方法小结
方法有二,总结如下: 第一方法: 直接在CS代码里敲: Response.Buffer = true; Response.ExpiresAbsolute = DateTime.Now.AddSeconds(-1); Response.Expires = 0; Response.CacheControl = "no-cache"; 当有人想按后退时页面已过期,效果就达到了 第二方法: SubmitOncePage:解决刷新页面造成的数据重复提交问题(网上资料) 执行过postback操作
-
vue history模式刷新404原因及解决方法
目录 项目场景: 问题描述 原因分析: 第一步 第二步 总结 项目场景: 提示:这里简述项目相关背景: vue项目路由history模式 问题描述 提示:这里描述项目中遇到的问题: vue history模式刷新404原因 原因分析: 因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404 解决方案
随机推荐
- 快速搭建React的环境步骤详解
- JavaScript正则表达式校验与递归函数实际应用实例解析
- python运行其他程序的实现方法
- Lua极简入门指南:全局变量
- SQL-ORDER BY 多字段排序(升序、降序)
- MongoDB数据更新方法干货篇
- 创业如何选择WEB开发语言
- js动态生成指定行数的表格
- 在ASP.NET 2.0中操作数据之二十:定制数据修改界面
- php中ob(Output Buffer 输出缓冲)函数使用方法
- 在Python中操作字符串之startswith()方法的使用
- php adodb连接mssql解决乱码问题
- PHP实现大数(浮点数)取余的方法
- 实现web打印的各种方法介绍及实现代码
- 解决JS无法调用Controller问题的方法
- 深入学习SQL Server聚合函数算法优化技巧
- 详解图的应用(最小生成树、拓扑排序、关键路径、最短路径)
- SpringMVC Validator验证示例
- Android利用CursorLoader实现短信验证码自动填写
- 详解Java 中的三种代理模式