页面刷新vuex数据消失问题解决方案,vuex储存的值刷新后消失

　　在项目中的表单过滤项中，刷新页面数据会在选择后发生变化，并且不会保留在选择的选项中。本文使用会话存储数据，具有一定的参考价值。有兴趣的可以看看。

前言

　　在项目中的表单过滤项中，刷新页面数据会在选择后发生变化，并且不会保留在选择的选项中。

　　项目中使用vuex保存数据，但网页刷新后，保存在商店中的数据丢失。

　　提示：以下是本文的主要内容，以下案例可供参考。

一、原因：

　　Vuex是一种全局数据状态管理机制，存储中的数据存储在运行内存中。当页面刷新时，页面将重新加载vue实例，并且存储中的数据将被重新分配到初始化状态。

二、解决思路：

　　当vuex与本地存储结合时，页面刷新数据不会丢失。

1.本地存储方法：

　　1.本地存储：永久存储。关闭页面或浏览器后，localStorage存储的数据不会消失。除非你主动删除数据，否则永远不会消失。

　　以Chrome浏览器为例，数据放在C:\Users\你的计算机名\ appdata \ local \ Google \ Chrome \ userdata \ default \ local storage \ level db中。

　　2.sessionStorage:仅在当前会话下有效。当当前页面或浏览器数据被关闭时，它将被销毁。SessionStorage是同一个源窗口。里面一直有数据，页面刷新还在。只要关闭当前页面，它就会被销毁。

　　3.cookie:如果浏览器中没有设置过期时间，那么cookie会保存在内存中，浏览器关闭时它的生命周期就结束了。这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期时间，则cookie会保存在硬盘中。浏览器关闭后，cookie数据仍然存在，直到过期时间结束才会消失。存储数据大小在4kb左右，一般不超过20个cookie，无法存储大数据。

　　扩展：cookie应用程序场景

　　(1)确定用户是否登录过网站，以便下次登录时可以自动登录(或者记住自己的密码)。如果我们删除cookie，我们必须在每次登录时重新填写登录信息。

　　(2)保存上次登录时间等信息。

　　(3)保存最后浏览的页面(保存访问过的路线信息)

　　(4)浏览器行为跟踪(如跟踪分析用户行为等。)

　　(5)个性化设置(如自定义设置、主题等。)

2.实现步骤：

　　由于vue是单页面应用，所有操作都在一个页面上完成，而且这个项目只在当前打开的项目中使用，所以使用sessionStorage更合适。

　　将数据保存在状态中，状态通过变异方法进行修改。当突变修改状态时，它也将数据保存在sessionStorage中。

　　当项目打开时，如果本地存储有数据，则初始化App.vue中的数据，然后调用actions中的方法为状态赋值。

　　当选择一个表单项目时，状态中的数据同时被修改。

　　//store/selectData.js

　　数据存储在const state={//state中

　　数据列表：{

　　exchangeIdSum: null，

　　}

　　常量突变={

　　Setexchangeidsum (state，data){//重新分配选定的数据，并保存在sessionStorage中。

　　state . datalist . exchange idsum=data

　　session storage . setitem( dataList ，JSON.stringify(state.dataList))

　　}

　　setDataList(state，data) {

　　state . datalist=JSON . parse(JSON . stringify(data))

　　}

　　常量操作={

　　resetDataList: ({commit}，list)={

　　setTimeout(()={

　　提交( setDataList ，List)

　　}, 2000);

　　}

　　导出默认值{

　　状态，

　　突变，

　　行动，

　　}

　　//表单筛选器页面中的操作

　　方法：{

　　exchange change(val){////下拉框选中时修改状态中的数据。

　　这个。$ store . commit( select data/setExchangeIdSum ，val)

　　}

　　//App.vue

　　Created(){//页面一进入，判断sessionStorage中是否有数据。

　　session storage . getitem( dataList )？

　　这个。$ store . dispatch( select data/reset dataList ，JSON . parse(session storage . getitem( dataList )):{ }

　　}

3.优化：

　　之前修改状态数据的时候，mutation每次都要修改sessionStorage，但是如果修改的状态数据很多，每次都会修改sessionStorage，有点麻烦。

　　解决：

　　数据可以直接存储在sessionStorage中。

　　 vue每次刷新都会丢失页面，所以可以在页面刷新前将数据存储在sessionStorage中，在页面刷新前触发beforeunload事件。

　　关于如何通过将vuex与会话存储数据相结合来解决页面刷新数据丢失的问题，本文到此结束。有关vuex会话存储数据的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。