vuex 存儲狀態 刷新丟失問題 優化

前言： 之前做的都是整個項目的vuex 存儲， 一般處理方式就是在主文件寫個方法重新拿數據， 例如用戶權限，刷新時重新請求後臺接口，拿回來數據  賦值給this.$store.state.參數名 ，現在的問題是，最近要做H5頁面集成平臺， 有大量的state值， 而且不是一個項目的， 分模塊的無法請求後臺拿回最新狀態， 只能做本地存儲， 刷新時重新賦值給this.$store.state, 這裏就出現了一些賦值問題。

vuex目錄結構

問題： 如果刷新時重新賦值使用 this.$store.state.personal = JSON.parse(localStorage.getItem('stateData.personal')) 這樣賦值的話就意味着後期模塊多了  每次都要去賦值的地方添加新的模塊 ， 麻煩還容易出錯。 

解決思路： 存儲本地時 更新了vuex  直接將 this.$store.state 整個存儲進本地緩存，取值時 this.$store.state = JSON.parse(localStorage.getItem('stateData')) 豈不是很方便， 但是這裏這樣直接賦值給this.$store.state 是會報錯的

錯誤：[Vue warn]: Error in created hook: "Error: [vuex] use store.replaceState() to explicit replace store state."

解決方案：

      存儲：

    this.$store.state.media.openid = 88833888
    localStorage.setItem('stateData', JSON.stringify(this.$store.state))

     賦值： 

     const data = JSON.parse(localStorage.getItem('stateData'))
      if (data) {
        this.$store.replaceState(Object.assign({}, this.$store.state, data))
      }

這裏最爲關鍵的是 使用this.$store.replaceState(）提供的更新方法