vuex刷新问题（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({ //配置 plugins: [createPersistedState()] })

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

import createPersistedState from vuex-persistedstate export default new Vuex.Store({ //配置 plugins: [createPersistedState({ storage: window.sessionStorage })] })

总结

Vuex只是在内存保存状态




















，刷新之后就会丢失              ，如果要持久化就要存起来 
  
  
  
  
  
  
 。 localStorage就很适合,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可


 


 


 


 


 


 


 。 这里有两个问题 
  
 
  
 
  
 
  
 
  
 
  
 
  
，不是所有状态都需要持久化；如果需要保存的状态很多













，编写的代码就不够优雅 
  
  
  
  
  
  
 ，每个提交的地方都要单独做保存处理 
 
 
 
 
 
 
。这里就可以利用vuex提供的subscribe方法做一个统一的处理  
   
   
   
   
   
   
 。甚至可以封装一个vuex插件以便复用

 

 

 

 

 

 

 。 类似的插件有vuex-persist 
  
  
  
  
  
  
 、vuex-persistedstate,内部的实现就是通过订阅mutation变化做统一处理 
  
  
  
  
  
  
 ，通过插件的选项控制哪些需要持久化