错误提示组件的开发技巧

<template>
  <div class="error-tip">
    <img :src="require('../../assets/img/error.png')" />
    <p>{{ errorData[errorCode] }}</p>
  </div>
</template>

<script>
import errorData from '@/data/error'

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'ErrorTip',
  setup(props) {
    const store = useStore()

    return {
      errorCode: computed(() => store.state.errorCode),
      errorData
    }
  },
}
</script>

export default {
  "217701": "未搜索到数据",
  "217702": "输入的日期格式错误",
  "10001": "无请求权限",
  "10002": "无请求权限",
  "10003": "无请求权限",
  "10004": "无请求权限",
  "10005": "无请求权限",
  "10007": "未知的请求源",
  "10008": "IP被禁止使用该功能",
  "10009": "无请求权限",
  "10011": "超过搜索数据限制次数",
  "10012": "超过搜索数据限制次数",
  "10013": "超过搜索数据限制次数",
  "10014": "系统正在维护",
  "10020": "系统正在维护",
  "10021": "系统正在维护",
};

<template>
  <div class="container">
    <error-tip></error-tip>
    <div v-if="!errorCode">
      <day-card :data="dayData"></day-card>
      <day-list :data="dayData"></day-list>
    </div>
  </div>
</template>