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刷新数据丢失的解决内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

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

  • 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 解决方案

随机推荐