vue刷新页面数据丢失

当进行F5页面刷新时，Vue页面的数据会丢失的原因是因为Vuex存储的数据只是在页面中，相当于全局变量，页面刷新时Vuex里的数据会重新初始化导致数据丢失。这是因为Vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载Vue实例，Vuex里面的数据就会被重新赋值。

解决这个问题的思路有多种方法。其中一种方法是在父页面向后台请求远程数据，并且在页面刷新前将Vuex的数据先保存至sessionStorage，以防请求数据量过大页面加载时拿不到返回的数据。这样在页面刷新后，可以从sessionStorage中获取之前保存的数据并重新赋值给Vuex，以保持页面数据不丢失。

另一种方法是使用传参和返回函数的方式，在Vuex的show函数中返回一个函数，该函数接收参数，并返回数据。这样即使页面刷新，通过传参和返回函数的方式可以重新获取之前的数据，而不会导致数据丢失。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue刷新后页面数据丢失问题的解决过程](https://blog.csdn.net/qq_41221596/article/details/128162300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]