react +mobx刷新页面数据恢复默认值问题

说实话之前我去百度一堆，就只看到一种方式，实在不好用，并且可用的博文又少，都是粘贴复制的文章，我都懒得看了，我就自己写了一套方案出来，觉得还不错在这里分享一下
首先主要是者两个文件

home.js是我们要用的store,
server.js是附加的保存数据的关键文件
home.js

import { observable,action} from "mobx"
import { getVal,setVal} from "./server"//新增的配置
class HomeStore { 
   @observable homeNum = getVal("homeNum", 11); //定义state赋予初值
   @observable navACtive = getVal("navACtive", 0);//定义state赋予初值
   @action clickNav(val) { 
          setVal("navACtive", val)    //更新state时修改
          this.navACtive = val;   
   }   
   @action addNum() { 
          this.homeNum += 1;      
          setVal("homeNum", this.homeNum)  
    }   
   @action lessNum() {    
          this.homeNum -= 1;   
          setVal("homeNum", this.homeNum)  
   }
}
export default HomeStore

server.js

// getVal是获取主要是给state定义初始值
// name：传入字符串是存于session的名称一般与state取名一致
// val:设置state初始值时赋予的值，可不传，默认为空
export const getVal = function (name,val="") {
  try {
	if(sessionStorage.getItem(name)!=undefined && sessionStorage.getItem(name)!=''){
      return JSON.parse(sessionStorage.getItem(name));
    }else{
      return val
    }	
  } catch (error) {
		return ""	
  }
 
}
// setVal是获取主要是给state更新值
// name：传入字符串是存于session的名称一般与state取名一致
// obj:更新的值
export const setVal = function (name,obj) {
  let ret=JSON.stringify(obj) 
    sessionStorage.setItem(name, ret);
}