vue 监听页面滚动位置 当返回 当前页面时还是在原来的位置

vue 监听页面滚动位置 当返回 当前页面时还是在原来的位置

位置有点乱 自己整理一下

data() {
	return {
	scrollTop: 0,
	}
},
mounted() {
    // 这里的antiShake使用的是防抖函数 防止滚动调用频繁
    window:addEventListener('scroll',antiShake(this.handleScroll,300))
},
methods: {
    handleScroll() {
        // 各种浏览器适配 将获取到的值 赋值给data中的scrollTop
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    },
    ...mapActions(['getScrollTopAction']),// 使用stroe 存储 
},
   // 当页面销毁时存储到 stroe中
   destroyed() {
    // 将当前页面滚动的位置 存储到 mapActions 这个 做了多层封装 通过 actions 提交给 mutations 再由 mutations 赋值给state中的
	//scrollTopHome
    this.getScrollTopAction(this.scrollTop);
  },
      created() {
          // 当页面 发生 重新创建 时将在stroe中存储的scrollTop 放到当前页面
          this.scrollTop = this.scrollTopHome //(这个函数来自 mapState)
      },
   // 当页面发生更新时 
  updated() {
    this.$nextTick(()=>{
      // 将存储到state中的页面销毁时的位置 当页面更新时放到当前返回的页面中
      window.scrollTo(0,this.scrollTop)
      // console.log(this.scrollTop);
    })
  }

防抖函数 放到公共.js文件中方便调用

export function antiShake(fun,wait) {
    let timer = null;
    return function (){
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=>{
            fun()
        },wait)
    }
}