Vuex页面刷新数据丢失的问题

muzidigbig

已于 2023-11-02 13:54:42 修改

阅读量2.6k

点赞数 1

分类专栏： Vuex vuejs 文章标签： vue.js vuex Vuex页面刷新数据丢失的问题

于 2023-03-20 16:17:50 首次发布

本文链接：https://blog.csdn.net/muzidigbig/article/details/129669455

版权

vuejs 同时被 2 个专栏收录

79 篇文章

订阅专栏

Vuex

8 篇文章

订阅专栏

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

刷新页面vuex的数据会丢失属于正常现象，(vuex的数据并不是弄丢了，而是初始化了，回到初始值，回到原点了).因为JS的数据都是保存在浏览器运行的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

解决办法?

方法一

将state的数据保存在localstorage,sessionstorage或cookie中。

在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法替换store的根状态

在beforeunload方法中将store.state存储到sessionstorage中。


export default {
  name: 'app',
  created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

这里注意：

replaceState 是覆盖 state ，合并的工作要使用 Object.assign() ，当然了，大部分时候并不需要合并，因为 sessionStorage 里的就是最新的 state ，直接覆盖就行了
尽量避免使用这个方法，在错误的位置使用这个方法会造成数据被错误覆盖，只应该在非常有必要恢复 state 的时候才使用，更多的时候，如果用户刷新页面，应让用户从头走操作流程，只有在连续答题、购物等少数场合需要用到，而且并不是必须使用，依然有其他变通方法

方法二

使用vuex-persistedstate,可以自动存储。

下载:


npm install --save vuex-persistedstate

使用:


在store.js中引入
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  state: {
　　　count: 1
　},

  //配置 
  // 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷
　　　新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中
  plugins: [createPersistedState()]
})

默认的是存储到localStorage里的，我们也可以存到sessionStorage中，如：


import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  state: {
　　　count: 1
  },

  //配置
  plugins: [createPersistedState({
   storage: window.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'
         }
     }
 })]
}）

总结