Javascript Vuetify定时通用警报组件

你好。我正在尝试创建一个通用警报组件，每当api调用失败时，该组件都会显示api错误

我试图使用settime out删除警报，但一旦se超时未重置，警报就会显示，因此它在屏幕上停留的时间是不同的。我可以删除setTimeOut，让用户只需单击警报消息即可将其关闭，但如果用户从未单击过该消息，则该消息将永远保持不变，这并不理想

我希望能够显示我的警报大约5秒钟

如何更改组件，使其在设定的时间内保持不变

这是我的密码：

我的App.vue，在这里我的整个应用程序被称为槽路由器。它检查是否存在指示错误的状态：

<template>
  <v-app>
    <v-content>
      <div class="AppPadding">
        <router-view />
      </div>
    </v-content>
    <div>
      <errorMessages v-if="errorMessage"/>
    </div>
  </v-app>
</template>

<script>
import errorMessages from "@/components/component/errorMessages";

export default {
  name: "App",
  components: {
    errorMessages
  },
  computed: {
    errorType: function() {
      return this.$store.getters.errorType;
    },
    errorMessage: function() {
      return this.$store.getters.errorMessage;
    }
  },
  data() {
    return {
      //
    };
  }
};
</script>

<style scoped>
.AppPadding {
  padding-top: 5%;
}
</style>

从“@/components/component/errorMessages”导入错误消息；
导出默认值{
名称：“应用程序”，
组成部分：{
错误消息
},
计算：{
errorType:function（）{
返回此。$store.getters.errorType；
},
errorMessage:函数（）{
返回此。$store.getters.errorMessage；
}
},
数据（）{
返回{
//
};
}
};
.AppPadding{
垫面：5%；
}

这是我的错误消息组件。它获取保存在“我的应用程序状态”中的错误类型和消息，并允许用户在单击时清除错误状态，从而关闭警报组件

<template>
  <div>
    <v-alert
      :value="errorExists"
      type="error"
      transition="slide-y-reverse-transition"
      v-model="errorMessage"
      @click="removeErrors"
    >
      {{ "ERROR: " + this.errorType + " " + this.errorMessage }}
    </v-alert>
  </div>
</template>

<script>
export default {
  computed: {
    errorType: function() {
      let value = this.$store.getters.errorType;
      if (value != undefined && value != null) {
        return this.$store.getters.errorType;
      } else {
        return "";
      }
    },
    errorMessage: function() {
      let value = this.$store.getters.errorMessage;
      if (value != undefined && value != null) {
        return this.$store.getters.errorMessage;
      } else {
        return "";
      }
    },
    errorExists: function() {
      let value = this.$store.getters.errorMessage;
      if (value != undefined && value != null) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    removeErrors(){
      this.$store.dispatch('removeErrors')
      console.log('remove errors')
    }
  },

  data() {
    return {
      //
    };
  }
};
</script>

{{“ERROR:+this.errorType+“”+this.errorMessage}
导出默认值{
计算：{
errorType:function（）{
让value=this.$store.getters.errorType；
如果（值！=未定义&&value！=null）{
返回此。$store.getters.errorType；
}否则{
返回“”；
}
},
errorMessage:函数（）{
让value=this.$store.getters.errorMessage；
如果（值！=未定义&&value！=null）{
返回此。$store.getters.errorMessage；
}否则{
返回“”；
}
},
errorExists:函数（）{
让value=this.$store.getters.errorMessage；
如果（值！=未定义&&value！=null）{
返回true；
}否则{
返回false；
}
}
},
方法：{
删除错误（）{
此.$store.dispatch（'removeErrors'））
console.log（'remove errors'）
}
},
数据（）{
返回{
//
};
}
};

我认为在当前代码中执行此操作的最简单方法是添加错误消息组件，以便使其在超时5秒后调用

removeErrors（）

方法。以下是带有额外超时的代码：

<template>
  <div>
    <v-alert
      :value="errorExists"
      type="error"
      transition="slide-y-reverse-transition"
      v-model="errorMessage"
      @click="removeErrors"
    >
      {{ "ERROR: " + this.errorType + " " + this.errorMessage }}
    </v-alert>
  </div>
</template>

<script>
export default {
  computed: {
    errorType: function() {
      let value = this.$store.getters.errorType;
      if (value != undefined && value != null) {
        return this.$store.getters.errorType;
      } else {
        return "";
      }
    },
    errorMessage: function() {
      let value = this.$store.getters.errorMessage;
      if (value != undefined && value != null) {
        return this.$store.getters.errorMessage;
      } else {
        return "";
      }
    },
    errorExists: function() {
      let value = this.$store.getters.errorMessage;
      if (value != undefined && value != null) {
        return true;
      } else {
        return false;
      }
    }
  },

  /* 
   * =========== only changed here ==========
   *  when mounted, the component fires removeError() after 5000 ms.
   */
  mounted() {
    setTimeout(this.removeErrors, 5000)
  }
  // ========================================

  methods: {
    removeErrors(){
      this.$store.dispatch('removeErrors')
      console.log('remove errors')
    }
  },

  data() {
    return {
  //
    };
  }
};
</script>

{{“ERROR:+this.errorType+“”+this.errorMessage}
导出默认值{
计算：{
errorType:function（）{
让value=this.$store.getters.errorType；
如果（值！=未定义&&value！=null）{
返回此。$store.getters.errorType；
}否则{
返回“”；
}
},
errorMessage:函数（）{
让value=this.$store.getters.errorMessage；
如果（值！=未定义&&value！=null）{
返回此。$store.getters.errorMessage；
}否则{
返回“”；
}
},
errorExists:函数（）{
让value=this.$store.getters.errorMessage；
如果（值！=未定义&&value！=null）{
返回true；
}否则{
返回false；
}
}
},
/* 
*===============仅在此处更改==========
*安装时，组件会在5000毫秒后激发removeError（）。
*/
安装的（）{
setTimeout（this.removeErrors，5000）
}
// ========================================
方法：{
删除错误（）{
此.$store.dispatch（'removeErrors'））
console.log（'remove errors'）
}
},
数据（）{
返回{
//
};
}
};