vuex 刷新页面状态丢失

问题描述:

　　移动端底部导航栏切换时更换图标，切换状态，有两种解决方案，一是通过路由query传值，而是用vuex保存状态，我选择用vuex，但是页面刷新了会丢失状态值，一顿百度，发现js运行在内存中的，所有变量函数啊都是在内存中的，刷新页面以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想储存就必须储存在外部，比如localStroage和sessionStorage，

我在APP.VUE中：

export default {
  name: "App",
  components: {},
  created(){
    if(sessionStorage.getItem('store')){
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }
    //页面加载之前存到sessionStoarge里
    window.addEventListener('beforeunload',()=>{
      sessionStorage.setItem('store',JSON.stringify(this.$store.state));
    })
  }
};

这样就解决了

为此，我发现JS 的内存，堆，栈，执行环境，http,https 这些鬼玩意真的需要好好的去认识一下。难怪面试会被问，因为工作中真的需要，好多好多东西要去学，学不动了~~