weixin_58412143 2022-03-30 09:20 采纳率: 93.8%
浏览 77
已结题

vue 切换组件后取不到缓存内容

情景:有两个tab页A,B,有个共用的头部组件可以实现A,B中echarts的换肤。
问题:现在的情况是单独在A或B里换肤是可以实现的,但是在切换A,B时换肤效果就没了(就是A里实现换肤后,切换到B中没有实现,再从B中返回到A时,A的效果也没了)A,B是两个组件,换肤功能是在他们的父组件里(父组件>中间组件1>中间组件2>A组件)
1、父组件

//切换到A
      homeChange() {
        if (this.themetype == null) {
           // this.themetype = 'dark'
         } else {
           this.resetSetItem('setThemetype', this.themetype);//这里打印this.themetype是对的
           }
      },
      //切换到B
      hjChange() {
        if (this.themetype == null) {
          // this.themetype = 'dark'
        } else {
          this.resetSetItem('setThemetype', this.themetype);//这里打印this.themetype是对的
          }
        },
     //换肤
change(theme) {
            if (this.themetype == 'dark') {
              document.documentElement.setAttribute("data-theme", 'light');
              this.themetype = 'light'
              console.log('改变为白色主题')
            } else {
              document.documentElement.setAttribute("data-theme", 'dark');
              this.themetype = 'dark'
              console.log('改变为深色主题')
            }
            // sessionStorage.setItem('setThemetype', this.themetype);//ok
            this.resetSetItem('setThemetype', this.themetype);//缓存当前主题
          },

2、A组件

    created() {
      window.addEventListener('setItem', () => {
        this.type = sessionStorage.getItem('setThemetype');
        if (this.type == 'light') {
          this.$set(this.options.toolbox.feature.dataView, 'backgroundColor', "#F1F0FE")
        } else if (this.type == 'dark') {
          this.$set(this.options.toolbox.feature.dataView, 'backgroundColor', "RGBA(8, 24, 54, 1)")
        }
      })
    },
   beforeDestroy() {
      //清除session
      sessionStorage.removeItem('setThemetype');
    },
  • 写回答

2条回答 默认 最新

  • rock.dai 2022-03-30 10:07
    关注

    这种情况你期望的是全局换肤吧?
    可以使用Vuex作为状态管理库,如果是小组件也可以是使用楼上说的keep-alive。因为你现在的代码是每个页面各自监听,当页面切换后,换肤的效果自然也就没有了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月7日
  • 已采纳回答 3月30日
  • 创建了问题 3月30日

悬赏问题

  • ¥15 qteasy 运行前进中
  • ¥15 我想通过python处理sybase IQ库的一些数据,但是不知道sybase IQ库怎么连接,之前连接都是用linux上的 dbisql
  • ¥15 安装llama-cpp-python==0.1.83失败
  • ¥20 管道轴向耦合水击问题
  • ¥60 补全networkx TODO部分。
  • ¥15 有内推吗,云计算linux运维方向
  • ¥30 sort cuteSV.vcf by bcftools用IGV可视化出现报错
  • ¥100 SOS!对STK中导出的天体图像进行质心提取有没有人做过啊
  • ¥15 python 欧式距离
  • ¥15 遗传算法解决有工序顺序约束的大规模FJSP问题