在vue项目的开发中经常会用到vuex来进行数据的存储，然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题！下面是我用过的解决方法

  • 利用storage缓存来实现vuex数据的刷新问题
  • 我们可以在mutation等vuex的方法中对于数据进行改变时，将数据同时存储进我们的本地浏览器缓存中；下面是我在mutation中写的方法；
  • 同步将数据的更改保存，也可以在页面调用vuex的mutation方法时同步更改；但是这种方法只能针对少量的数据需要保持不刷新，在真正的卡发中并不适用
  • 利用已有的插件来进行保存新状态
  • 已知的插件中，我目前使用的是vuex-along插件，该插件使用非常方便简洁。
  • 通过 cnpm i vuex-along -D下载插件，在进行引入，在store里面通过plugin来使用，这样就能将所有的state的数据都进行保存，不回应为刷新而更改，当然如果你想仅对某些数据进行保存，也可以使用对应的插件的api来实现，具体的api请看github；https://github.com/boenfu/vuex-along；

解决vuex数据页面刷新后初始化问题的更多相关文章

  1. 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  2. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  3. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  4. 解决vuex在页面刷新后数据丢失的问题

    一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...

  5. Vuex数据页面刷新丢失问题解决方案

    用Vue做项目开发很久了,对于vuex能用.会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还 ...

  6. Vuex 页面刷新后store保存的数据会丢失 取cookie值

    在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...

  7. vue通过路由传值及在页面刷新后如何保存值

    1.普通的路由跳转 方式一:通过routerLinkTo方式,转为a标签的跳转,to里面相当于a标签的href路径 如下: 方式二:通过this.$router.push方式: 如下: 2.带参数的路 ...

  8. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  9. Html 页面刷新后出现闪动

    Html 页面刷新后,或跳转后,出现闪动,抖动问题 1.查看有没有用到新字体,新字体链接位置是否存在 如: @font-face { font-family: "AvantGarde-Dem ...

随机推荐

  1. HBase调优案例（三）——Spark访问HBase慢

    负载信息:RegionServer:3个 Region:5400多个 现象:在使用Spark对HBase进行scan操作时发现有些task执行比较慢 原因分析:查看Spark应用的executor日志 ...

  2. webpack 自动运行，及打包 img css json 的操作 npm插件的使用方法

    没有指令操作的属性生产环境,有指令操作的属于开发环境 webpack:输入指令后,便会自动开启一个浏览器 需要插件:open-browser-webpack-plugin 生产环境 想使用 node. ...

  3. linux 系统环境变量配置

    使用Ubuntu 进行开发绕不开的就是环境变量的配置,由于Linux系统严格的权限管理,造成Ubuntu系统有多个环境变量配置文件,如果不了解其调用顺序,很有可能遇到配置了环境变量,而没有其作用的问题 ...

  4. ES6实现数组去重

    ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Array.from方法可以将 Set 结构转为数组. 扩展运算符内部调用的是数据结构的 Iterator 接 ...

  5. java网络通信：同步阻塞式I/O模型(BIO)

    缺点:一个线程只能处理一个客户端连接 服务端: public class TimeServer { public static void main(String[] args) throws IOEx ...

  6. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_4 mybatis中使用unpooled配置连接池的原理分析

    把之前的CRUD的代码src下的代码都复制过来 依赖项也都复制过来, 配置文件 整理一番 执行findAll方法的测试 查看日志的输出部分 修改程序池 再来执行findAll方法 Plooled从连接 ...

  7. 测开之路一百二十五：flask之urlencode参数传递和解析

    当get请求传参时,用?分隔参数和域名,用&分隔参数,如果参数里面本身就有&符号就会识别不出来,还是会当成分隔符,所以这些数据在传输的时候,就需要转义,现在普遍是转成urlencode ...

  8. JS函数的基础部分

    JS函数的基础部分 JS函数的部分: 先看下一段的代码: window.onload = function(){  function test(){   alert("123"); ...

  9. SpringCloud:(一)服务注册与发现

    最近跟着方志明老师学习SpringCloud,博客地址如下: https://blog.csdn.net/forezp/article/details/81040925 自己也跟着撸了一遍,纸上得来终 ...

  10. 应用安全 - 软件漏洞 - sudo漏洞汇总

    sudo Potential bypass of Runas user restrictions(CVE-2019-14287 ) Date:2019.10.14 类型: sudo提权漏洞 影响版本: ...