Refresh blank workaround with vuex request

vuex

在vuex里面请求接口 然后在对于页面进行拿取
通过this.$store.dispatch("自定义的名称").then(() => {
    
    
this.$store.state.medical.在data自定义的名称
}
然后里面对于的功能通过组件(父子) 组件里面进行拿,但是反复跳转会拿到控制

也就是会刷新数据拿不到

所以需要缓存配置
vuex当中请求数据进行切换时数据是显示的,
但是在对于页面进行刷新的时候,数据不见了 是空白的

the first method

app.vue

write in created

  window.addEventListener("beforeunload", () => {
    
    
      localStorage.setItem("store", JSON.stringify(this.$store.state));
    });
    if (localStorage.getItem("store")) {
    
    
      this.$store.replaceState(
        Object.assign(
          {
    
    },
          this.$store.state,
          JSON.parse(localStorage.getItem("store"))
        )
      );
    }


2nd method

在不同的页面进行缓存
直接缓存也不可直接缓存缓存个寂寞
//在拿到的时候通过判断长度不为0进行缓存
//单独的页面里面
 created() {
    
    
    if (this.$store.state.medical.managelist.length !== 0) {
    
    
      window.sessionStorage.setItem(
        "female",
        JSON.stringify(this.$store.state.medical.managelist)
      );
    }//进行缓存
 let list = JSON.parse(window.sessionStorage.getItem("female"));//进行拿取

Guess you like

Origin blog.csdn.net/m0_53912016/article/details/124280445