首页IT科技怎么解决vuex刷新(解决Vuex刷新页面数据丢失的问题)

怎么解决vuex刷新(解决Vuex刷新页面数据丢失的问题)

时间2025-05-05 15:00:43分类IT科技浏览8268
导读:一:数据丢失的原因 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。 因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。...

一:数据丢失的原因

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

二:解决的思路

将vuex中的数据直接保存到浏览器缓存中(sessionStorage              、localStorage                      、cookie) 页面刷新后再从浏览器中取出

三:解决方法

方法一:

直接在vuex修改数据方法中将数据存储到浏览器本地存储中 import Vue from vue; import Vuex from vuex; Vue.use(Vuex); export default new Vuex.Store({ state: { orderList: [], menuList: [] }, mutations: { orderList(s, d) { s.orderList= d; window.localStorage.setItem("list",jsON.stringify(s.orderList)) }, menuList(s, d) { s.menuList = d; window.localStorage.setItem("list",jsON.stringify(s.menuList)) }, } }) 在页面加载时再从本地存储中取出并赋给vuex if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list")))) }

在此可以进行优化

通过监听beforeunload事件来进行数据的localStorage存储        ,beforeunload事件在页面刷新时进行触发                     ,具体做法是在App.vue的created()周期函数中下如下代码: if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list")))) } window.addEventListener("beforeunload",()=>{ window.localStorage.setItem("list",JSON.stringify(this.$store.state

)) }) 方法二:

利用第三方库进行持久化存储 安装 vuex-persistedstate

npm install --save vuex-persistedstate

在store文件夹下的indedx.js中配置信息 使用vuex-persistedstate默认存储到localStorage import createPersistedState from "vuex-persistedstate" const store =newVuex.Store({   state: {     count: 1   },   mutations: {},   actions: {},   // 当state中的值发生改变              ,此时localStorage中的vuex的值会同步把state中的所有值存储起来        ,当页面刷    新的时候                      ,state的值会从localStorage自动获取vuex的value值              ,赋值到state中   plugins: [createPersistedState()] }) 使用vuex-persistedstate存储到sessionStorage import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, plugins: [createPersistedState({ storage:window.sessionStorage // 同localStorage相同,只是将vuex的所有值存储到sessionStorage中 })] }) 使用vuex-persistedstate指定需要持久化的state import createPersistedState from "vuex-persistedstate" const store = newVuex.Store({ state: {   count: 0 }, mutations: {}, actions: {}, plugins: [createPersistedState({   storage:window.sessionStorage,   reducer(val) { // 此时                      ,当count发生改变的时候                     ,就会调用此函数,并且val的值为当前state对象               ,return的值为当前本地存储的value值(本地存储的key值为vuex) return { count: val.count,         changeCount: aaa } } })] })

四:总结

其实解决此问题的方法有很多,基本上都是要借助于localStorage或者sessionStroage来存放       。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python的exe文件在哪(python中的exec()函数用法)