VUEX解決瀏覽器刷新狀態丟失問題

vuex的主要做用是組件之間的通訊以及對數據進行中心化管理。

 可是因爲vuex中的數據是存在運行內存中的，因此當咱們刷新頁面的時候會致使store中的數據清空。

 怎麼解決這個問題呢？

 咱們能夠使用傳統的存儲方式將store中的數據存起來，好比cookie、localstorage或者sessionstorage，這樣刷新頁面數據也不會丟失了。

 只是爲了保留瀏覽器刷新前的數據，因此咱們選用sessionstorage，這樣關閉瀏覽器，存儲的數據就會被清空，不會產生重複數據。 

具體實現思路是這樣的，咱們監聽頁面刷新事件，在刷新前將store中的數據存sessionstorge中。每次進入頁面的時候先讀取sessionstorage中的值並把它賦給store，這樣就保留了刷新前的數據。

export default {
  name: 'App',
  created () {
    if (sessionStorage.getItem("store") ) {   //頁面加載前讀取sessionStorage裏的狀態信息
　　   this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 
    window.addEventListener("beforeunload",()=>{   //在頁面刷新前將vuex裏的信息保存到sessionStorage裏
　　   sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}複製代碼