在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. CentOS 7 安装wps2019

    1. download https://www.wps.cn/product/wpslinux 2. rpm 安装缺少lib包,于是yum 安装 .x86_64.rpm 3.安装完成,运行的时候又报错 ...

  2. idea使用 git 撤销commit 原

    填写commit的id  就可以取消这一次的commit

  3. was安装相关步骤（Linux）

    本次试验目的主要对websphere 二次内部解剖对中间件性能优化垫铺. 1.准备相关文件 其中 iso文件为WAS主要镜像文件(WAS文件所在地) Instalmgr为IBM安装引导程序instal ...

  4. Spring的Ioc理解

    1.Ioc=控制反转和依赖注入(DI),两个是一回事 控制反转的好处: 把对象的创建和依赖定义在xml中,改变子类的实现变得很简单 控制反转减轻了对象之间的耦合度,减轻了对象之间的依赖关系,增加了系统 ...

  5. Django信号量

    摘自官方文档 使用 信号 Django发送的所有信号的列表.使用该send()方法发送所有内置信号. 参见 有关如何注册和接收信号的信息,请参阅信号调度器上的文档. 用户登录/注销时,身份验证框架会 ...

  6. Delphi下利用WinIo模拟鼠标键盘详解 有参考价值

    https://blog.csdn.net/fgrass_163/article/details/6365296 Delphi下利用WinIo模拟鼠标键盘详解 2011年04月26日 21:03:00 ...

  7. sql type subtype 统计

    select * from testtable; type subtype value a sa 1b sb 1a sb errorb sa errora sb 1b sb 1c sa errorc ...

  8. Windows 2008任务计划执行bat脚本失败返回0x1

    测试环境: C:\>systeminfo | findstr /c:"OS Name"OS Name:                   Microsoft Windows ...

  9. 别把&和nohup混为一谈, 根本不是同一个东西好不好 ------ 聊聊./a.out & , nohut ./a.out , nohup ./a.out &的区别

    在第一家公司工作的时候, 我认识了&,在第二家公司工作的时候, 我认识了nohup,  这就是渊源.  随后, 我就一直糊涂用他们, 但并不懂这两个东西. 网上很多地方是乱扯, 瞎复制, 为什 ...

  10. vue--综合组件间的通信

    二.综合组件之间的通信 实现一个ToDoList. ①完成所有的组件的创建和使用 ②add点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist) 核心代码:兄弟组件间通 ...