vue监控-2

<script>
  let read = ''
  export default{
    data () { // 这里存放数据
      return {
        timer: '', // 定时器
        currentTime: 0, // 开始时间
        readTime : 0 // 阅读时间
      };
    },
    // 监听属性 类似于data概念
    computed: {
      userCheck(){ // 同步
        if (this.$store.getters.User  == ''){
          this.disableTP()
        } else {
          this.enableTP()
        }
      }
    },
    // 监控data中的数据变化
    watch: {
      // 监听computed中的useChange值
      userCheck(){
        this.enableTP()
      }
      // '$store.getters.User':'enableTP'
    },
    methods: {
      requestTP () {
        this.$axios.get(url + this.id, {
          params: {
            articleTypeName: this.name
          }
        }) // .then(data => {console.log(data)})
      },
      enableTP () { // 启用浏览
        this.printViolet('检测用户登录状态...' + this.$store.getters.User)
        if (this.$store.getters.User) {
          this.printViolet('检测浏览器状态...' + document.visibilityState === 'hidden')
          if (document.visibilityState != 'hidden') {
            this.printViolet('检测计时器状态...' + (this.timer == null || this.timer === '')) // || "undefined" == typeof this.timer
            if (this.timer == null || this.timer === '') {
              this.timer = setInterval(this.startTimer, 1000);
            }
          }
        }
      },
      // 关闭浏览
      disableTP () {
        clearInterval(this.timer) // 关闭定时器，需要请求
        this.timer = '' // 清楚计时器后，计时器的id还在，所以需要赋空
      },
      // 浏览启用判定
      startTimer () {
        this.currentTime++
        if (this.readTime == null || "undefined" == typeof this.readTime || this.readTime == 0) {
          this.disableTP()
        }
        if (this.currentTime >= this.readTime) {
          this.disableTP() // 关闭
          this.requestTP() // 触发
        }
      },
      // 浏览开关
      switchTP(){
        if(document.visibilityState == 'hidden'){
          this.disableTP()
        }else{
          this.enableTP()
        }
      },
      // 状态
      stateTP () {
        document.addEventListener("visibilitychange", this.switchTP)
      },
      // 打印绿色提示消息
      printViolet (str) {
        console.log('%c%s', 'color:green', str)
      },
      // 判断是否存在
      isExistObject (obj) {
        return obj == null || "undefined" == typeof obj || obj === ''
      },
      // 判断是否为空
      isNullObject (obj) {
        return obj == null || "undefined" == typeof obj
      },
      // 彩色打印
      printColor (str) {
        let color = ['violet', 'red', 'green', 'blue', 'yellow']
        console.log('%c%s', 'color:' + color[2], str)
      }
    }
  }
</script>