Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to solve the data loss of vuex page refresh

2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

今天小编给大家分享一下vuex页面刷新数据丢失怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

为什么说刷新页面vuex的数据会丢失

刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了。

第一种方法用sessionStorage

将接口返回的数据保存在vuex的store里,也将这些信息也保存在sessionStorage里。注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化。

在store文件夹里面的js文件 示例如下

const state = { authInfo: JSON.parse(sessionStorage.getItem("COMPANY_AUTH_INFO")) || {}}const getters = { authInfo: state => state.authInfo,}const mutations = { SET_COMPANY_AUTH_INFO(state, data) { state.authInfo = data sessionStorage.setItem("COMPANY_AUTH_INFO", JSON.stringify(data)) }}//actions 模块里无需使用 sessionStorageexport default { namespaced: true, state, getters, mutations, //actions,}

其实这里还可以用 localStorage,但是它没有期限;所以常用的还是sessionStorage,当浏览器关闭时会话结束。

第二种方法是 vuex-along示例如下

(1)安装 vuex-along

npm install vuex-along --save

(2)在store文件夹里的index.js中引入vuex-along并配置相关代码

import Vue from 'vue'import Vuex from 'vuex'import indexOne from "./modules/indexOne"import VueXAlong from 'vuex-along'Vue.use(Vuex)const store=new Vuex.Store({ strict: false, modules:{ indexOne }, plugins: [VueXAlong({ name: 'along', //存放在localStroage或者sessionStroage 中的名字 local: false, //是否存放在local中 false 不存放 如果存放按照下面session的配置配 session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中 })]})export default store;第三种方法是 vuex-persistedstate示例如下

(1)安装 vuex-persistedstate

npm install --save vuex-persistedstate

(2)在store文件夹里的index.js中引入vuex-persistedstate并配置相关代码

import Vue from 'vue'import Vuex from 'vuex'import user from './modules/user'import createPersistedState from "vuex-persistedstate"Vue.use(Vuex)const store = new Vuex.Store({ modules: { user },plugins: [createPersistedState({ storage: window.sessionStorage, reducer(val) { return { // 只储存state中的user user: val.base } } })]})export default store;第四种方法是 vuex-persist示例如下

(1)安装 vuex-persist

npm install --save vuex-persistoryarn add vuex-persist

(2)在store文件夹里的index.js中引入vuex-persist并配置相关代码

import Vue from 'vue'import Vuex from 'vuex'import indexOne from "./modules/indexOne"import VuexPersistence from 'vuex-persist'Vue.use(Vuex)const vuexLocal = new VuexPersistence({ storage: window.localStorage})const store = new Vuex.Store({ strict: false, modules:{ indexOne, }, plugins: [vuexLocal.plugin] }) export default store;以上就是"vuex页面刷新数据丢失怎么解决"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 208

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report