在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. MyBatis框架之mybatis逆向工程自动生成代码

    http://www.jb51.net/article/82062.htm Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由于手动书写很容易出错,我们 ...

  2. 超过 150 个最佳机器学习，NLP 和 Python教程

    超过 150 个最佳机器学习,NLP 和 Python教程 微信号 & QQ:862251340微信公众号:coderpai简书地址:http://www.jianshu.com/p/2be3 ...

  3. Linux高级调试与优化——gdb调试命令

    番外 2019年7月26日至27日,公司邀请<软件调试>和<格蠹汇编——软件调试案例集锦>两本书的作者张银奎老师进行<Linux高级调试与优化>培训,有幸聆听张老师 ...

  4. 二进制方式安装mysql

    下载官方打包好的rpm的集合 https://downloads.mysql.com/archives/get/file/mysql-5.7.20-1.el7.x86_64.rpm-bundle.ta ...

  5. np.random.shuffle(x)与np.random.permutation(x)

    来自:https://blog.csdn.net/brucewong0516/article/details/79012233 将数组打乱随机排列 两种方法: np.random.shuffle(x) ...

  6. 前端必须掌握的 docker 技能(2)

    概述 作为一个前端,我觉得必须要学会使用 docker 干下面几件事: 部署前端应用 部署 nginx 给部署的 nginx 加上 https 使用 docker compose 进行部署 给 ngi ...

  7. django.core.exceptions.AppRegistryNotReady: Models aren't loaded yet.的解决办法

    如题,这个错误的解决办法如下: 在代码文件的最上方添加以下代码: import os,django os.environ.setdefault("DJANGO_SETTINGS_MODULE ...

  8. 中国MOOC_零基础学Java语言_第4周 循环控制

    4.1 for循环 Tips for loops 如果有固定次数,用for 如果必须执行一次,用do_while 其他情况用while 4.2 循环控制 break和continue 在循环前可以放一 ...

  9. 安装golang web框架 gin

    gin 地址https://github.com/gin-gonic/gin#installation 去gin 地址 clone 下来,放到对应的包中即可.如:gin就放在项目文件夹/github. ...

  10. 【SSH】---【Struts2、Hibernate5、Spring4】【散点知识】

    一.Struts21.1.Struts2的概念Struts2是一个用来开发MVC应用程序的框架,它提供了Web应用程序开发过程中的一些常见问题的解决方案:    ->对来自用户的输入数据进行合法 ...