使用vuex的問題記錄--解決刷新頁面state數據消失

在實際的vue項目中，當咱們的應用遇到多個組件之間的共享問題時，一般會用到Vuex（一個狀態管理的插件，能夠解決不一樣組件之間的數據共享和數據持久化），解決組件之間同一狀態的共享問題。

因子：

• Vuex優點：相比sessionStorage，存儲數據更安全，sessionStorage能夠在控制檯被看到。
• Vuex劣勢：在刷新頁面後，vuex會從新更新state，因此，存儲的數據會丟失。

言而總之：
實際問題：在vue項目中，使用Vuex作狀態管理時，調試頁面時，刷新後state上的數據消失了，該如何解決？

解決思路：將state中的數據放在瀏覽器sessionStorage和localStorage
解決辦法：

1. 存儲到localStorage

經過監聽頁面的刷新操做，即beforeunload前存入本地localStorage,頁面加載時再從本地localStorage讀取信息
在App.vue中加入下面代碼

created(){
    //在頁面刷新時將vuex裏的信息保存到localStorage裏
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
        })
        
    //在頁面加載時讀取localStorage裏的狀態信息
        localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
  }

1. 使用vuex-persistedstate 插件

安裝插件：npm install vuex-persistedstate --save
配置：
在store的index.js中，手動引入插件並配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

該插件默認持久化全部state，固然也能夠指定須要持久化的state：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(data) {
          return {
          // 設置只儲存state中的myData
          myData: data.myData
        }
     }
  })]