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

为什么说刷新页面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))
    })
  }
}

方法二

使用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'
         }
     }
 })]
})

总结

  • Vuex只是在内存保存状态,刷新之后就会丢失,如果要持久化就要存起来。

  • localStorage就很适合,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可。

  • 这里有两个问题,不是所有状态都需要持久化;如果需要保存的状态很多,编写的代码就不够优雅,每个提交的地方都要单独做保存处理。这里就可以利用vuex提供的subscribe方法做一个统一的处理。甚至可以封装一个vuex插件以便复用。

  • 类似的插件有vuex-persist、vuex-persistedstate,内部的实现就是通过订阅mutation变化做统一处理,通过插件的选项控制哪些需要持久化

你可能感兴趣的:(Vuex,vuejs,vue.js,vuex,Vuex页面刷新数据丢失的问题)