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(）提供的更新方法