解决Vuex刷新页面数据丢失的问题 |
您所在的位置:网站首页 › vuex刷新页面数据丢失插件 › 解决Vuex刷新页面数据丢失的问题 |
参考: https://blog.csdn.net/qq_51441159/article/details/128047610 2、在页面加载时再从本地存储中取出并赋给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)) })方法二(使用插件): 1、安装 vuex-persistedstate npm install --save vuex-persistedstate2、在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来存放。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |