解决vuex数据页面刷新后初始化操作
在vue项目的开发中经常会用到vuex来进行数据的存储，然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题！下面是我用过的解决方法
1、利用storage缓存来实现vuex数据的刷新问题
我们可以在mutation等vuex的方法中对于数据进行改变时，将数据同时存储进我们的本地浏览器缓存中；下面是我在mutation中写的方法；
同步将数据的更改保存，也可以在页面调用vuex的mutation方法时同步更改；但是这种方法只能针对少量的数据需要保持不刷新，在真正的卡发中并不适用
2、利用已有的插件来进行保存新状态
一致的插件中，我目前使用的是vuex-along插件，该插件使用非常方便简洁。
通过 cnpm i vuex-along -D下载插件，在进行引入，在store里面通过plugin来使用，这样就能将所有的state的数据都进行保存，不回应为刷新而更改，当然如果你想仅对某些数据进行保存，也可以使用对应的插件的api来实现，具体的api请看github；
上面的代码仅为展示vuex-along插件的使用，项目的真实写法并不规范，对于一般项目会将vuex的每个模块独立拆分出来，分别进行管理
同时在项目中我们也都尽量使用辅助函数来实现vuex的管理，而不会应用原生的写法
对于state和getter的数据可以在计算属性中来因够用。而mutation和action则在methods方法应用；如果你需要修改计算属性，现在需要设置对应的setter。
以上纯属自己的一点意见，如果需要请采纳！
补充知识：vuex在刷新页面时保持数据不变（vuex状态持久化）
问题：
在 vue 项目中使用 vuex 来进行数据状态的管理，当刷新页面时，vuex 中 state 的数据会出现初始化问题（数据丢失）
解决方法：
1.使用 webStorage 缓存
当浏览器窗口关闭或者刷新时，会触发beforeunload事件，此时，可以使用 webStorage 缓存来实现 vuex 在刷新页面时保持数据不变
created(){
//在页面加载时读取sessionStorage里的状态信息
this.$store.state.userInfo = window.sessionStorage.getItem("userInfo")
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
window.sessionStorage.setItem("userInfo", this.$store.state.userInfo)
})
}
2.使用vuex状态持久化插件vuex-persistedstate
vuex-persistedstate插件使用浏览器的本地存储（ local storage ）对 vuex 的状态（ state ）进行持久化
安装 vuex-persistedstate：
npm install vuex-persistedstate --save-dev
在store文件夹的 index.js 中使用
//引入vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
......
export default new Vuex.Store({
......
//配置vuex-persistedstate
plugins: [createPersistedState(
//配置将vuex的状态储存到sessionStorage中（默认储存到localStorage中）
{ storage: window.sessionStorage }
)]
})
以上这篇解决vuex数据页面刷新后初始化操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持猪先飞。
相关文章
php无刷新利用iframe实现页面无刷新上传文件(1/2)
利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数，该参数为从客户端获取的$_files变量，返回重新命名后的文件名，如果上传失...2016-11-25PHP传值到不同页面的三种常见方式及php和html之间传值问题
在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24- 直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
jQuery+PHP发布的内容进行无刷新分页（Fckeditor）
这篇文章将使用jQuery，并结合PHP，将Fckeditor发布的内容进行分页，并且实现无刷新切换页面。 本文假设你是WEB开发人员，掌握了jQuery和PHP相关知识，并且熟知Fckeditor的配置和使用。...2015-10-23- 这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 对于乱码这个问题php开发者几乎都会有碰到过，我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行： header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
Vue初始化中的选项合并之initInternalComponent详解
这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-11- 这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
- 本文就是和大家分享一款由php结合ajax实现的无刷新留言板，先给大家看一下最后的效果图：数据库连接代码如下： <?php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30
- 这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下...2016-01-08
- 这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下...2021-02-09
- 这篇文章主要介绍了vue实现在进行增删改操作后刷新页面，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要介绍了Vue 中获取当前时间并实时刷新,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-05-13
- 这篇文章主要介绍了C#中数组初始化与数组元素复制的方法,涉及C#中数组的创建、初始化及使用Array.Copy方法复制数组元素的技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#实现刷新桌面的方法,涉及C#基于shell32.dll动态链接库实现系统桌面刷新的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Pycharm 跳转回之前所在页面的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
- 代码很简单，实现的功能却很实用，直接奉上代码CSS：复制代码 代码如下: <meta charset="utf-8" /> <title>Pull to Refresh</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scal...2015-03-15
- 这篇文章主要介绍了微信小程序 注册页面的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了Springboot使用thymeleaf动态模板实现刷新,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-31