在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. ES6中对字符串处理的优点

    目录 1.字符的Unicode表示法 2.字符串的遍历接口 3.直接输入 U+2028 和 U+2029(分行符 和 分段符) 4.JSON.stringify() 的改造 1.字符的Unicode表 ...

  2. 一个Qt线程的例子，用于说明QWaitCondition的作用

      描述可能比较麻烦,还是直接上代码吧! main.cpp #include <QApplication> #include "mainpage.h" int main ...

  3. 启动webpack-dev-server错误，ERROR in main.js from UglifyJs Unexpected token: name «element», expected: punc «;»

    启动webpack-dev-server出现以下错误 ERROR in main.js from UglifyJsUnexpected token: name «element», expected: ...

  4. wxs 及 获取节点 和 网络请求

    wxs:微信小程序脚本语言,结合 wxml 可以构建页面的结构 在 wxml 中使用 wxs wxs 中的注释 : 单行注释:// 多行注释:/* */ wxs 在页面中的用法 在页面中引用 wxs ...

  5. JS中keyup, keypress, keydown以及oninput四个事件的区别

    $email_input.onkeyup=function(event){ // console.log('event handle');//按方向键以及backspce esc有反应 长按字母键也没 ...

  6. day67—angularJS学习笔记控制器

    转行学开发,代码100天——2018-05-22 angularJS通过控制器来控制数据流的应用. ng-controller. 控制器中包含属性和函数,其参数引用通过 $scope来执行. 如下文的 ...

  7. 数据库之SQL语句查询基础

    人的一生要疯狂一次,无论是为一个人,一段情,一段旅途,或一个梦想. 人没有梦想是荒废的,是漫无目的的,拥有梦想你会飞的更远. 下面我就来为大家介绍一下SQL语句的查询基础,以下使用MySchool数据 ...

  8. 阶段3 1.Mybatis_04.自定义Mybatis框架基于注解开发_3 基于注解的自定义再分析

    这里只需要 一是连接数据库的 二是映射的 注解是class的方式  dom4j技术获取xml的数据,这是xml的方式获取的下面几个关键的点 注解的方式回去dao类里面的几个主要的信息 User黄色的部 ...

  9. Text Elements(文本元素)对象

    1.T-Code:SE32 操作路径:主菜单——转到——内文元素——选择内文 2. 清单标题(List heading) 用于定义Report标题名称及描述,如图: 2. 選擇內文 (Selectio ...

  10. wcf restful 访问报错 *.svc HTTP error 404.17 - Not Found

    安装完成 iisreset,即使不重启也已经可以使用了