Vue Composition API: Suggested Script Structure

Imports

import { computed, onMounted, ref, watch } from "vue";
import { useStore } from "vue-composition-wrapper";

Icon Registration

library.add(faEllipsisV, faDownload, faInfoCircle);

Definitions for Consumers

Props

interface Props {
    dependent: Dependent;
}
const props = defineProps<Props>();

Emits

const emit = defineEmits<{
    (e: "needs-update"): void;
}>();

Exposed Members

defineExpose({ generateReport });

Internal Interfaces and Nonreactive Data

interface Covid19LaboratoryOrderRow {
    date: string;
    test_type: string;
    test_location: string;
    result: string;
}

const homeBreadcrumbItem: BreadcrumbItem = {
    text: "Home",
    to: "/home",
    dataTestId: "breadcrumb-home",
};

Injected Services and Composables

const logger = container.get<ILogger>(SERVICE_IDENTIFIER.Logger);
const reportService = container.get<IReportService>(
    SERVICE_IDENTIFIER.ReportService
);
const store = useStore();

References

Refs

const isLoading = ref(false);
const laboratoryOrders = ref<LaboratoryOrder[]>([]);

Template Refs

const idleModal = ref<InstanceType<typeof IdleComponent>>();

Computed Properties

Store Getters

const isMobile = computed<boolean>(() => store.getters["isMobile"]);
const user = computed<User>(() => store.getters["user/user"]);

Other Computed Properties

const isResourceCentreVisible = computed(() =>
    currentPathMatches(dependentsPath, reportsPath, timelinePath)
);
const isVaccineRecordDownloading = computed(
    () => vaccineRecordState.value.status === LoadStatus.REQUESTED
);

Functions

Store Actions

function setTooManyRequestsError(key: string): void {
    store.dispatch("errorBanner/setTooManyRequestsError", { key });
}

Other Functions

function formatDate(date: StringISODate): string {
    return DateWrapper.format(date);
}

function initializeResizeListener(): void {
    window.addEventListener("resize", onResize);
    onResize();
}

Watchers

watch(isEmpty, () => {
    emit("on-is-empty-changed", isEmpty.value);
});

Lifecycle Events

onMounted(async () => {
    windowWidth.value = window.innerWidth;

    await nextTick();
    initializeResizeListener();
    initializeIdleDetector();
    initialized.value = true;
});

"onCreated" Actions

retrieveCovid19LaboratoryOrders(props.hdid).catch((err) =>
    logger.error(`Error loading Covid19 data: ${err}`)
);