Import a export

Každý soubor aplikace ve Vue je modul: část programu s vlastními proměnnými. Co modul vytvoří, existuje jen v něm, takže App.vue proměnné z jiného souboru nevidí. Soubor hodnotu sdílí tak, že ji exportuje, a soubor, který ji potřebuje, si ji importuje. Řádky s importem píšete od první lekce. Teď se podíváte, jak fungují.

Soubor může mít jeden výchozí export (default export): svou hlavní hodnotu, kterou exportuje pomocí export default. Importuje se bez složených závorek, pod jménem, které si vybere soubor s importem:

// kavarna.js
const nabidka = [
    { id: 1, nazev: "Espresso", cena: 55 },
    { id: 2, nazev: "Cappuccino", cena: 75 },
];

export default nabidka;

// App.vue
import nabidka from "./kavarna.js";

Soubor může také exportovat libovolný počet hodnot pod jejich jmény, s export před const. Takové pojmenované exporty se importují ve složených závorkách, pod přesně stejnými jmény, oddělené čárkami:

// kavarna.js
export const nazevKavarny = "Kavárna Na Rohu";
export const oteviraciDoba = "7:00 do 19:00";

// App.vue
import { nazevKavarny, oteviraciDoba } from "./kavarna.js";

Když soubor má obojí, jeden import vezme obojí: nejdřív výchozí export, pak pojmenované v závorkách, import nabidka, { nazevKavarny } from "./kavarna.js";. Typická chyba jsou závorky tam, kde nemají být, nebo naopak: import pak hodnotu nenajde a stránka na jejím místě nic neukáže. (V projektu na vlastním počítači se u takového importu prohlížeč zastaví chybou, že soubor „does not provide an export named …“.)

Teď už přečtete každý import, který jste viděli:

• import { ref } from "vue"; importuje pojmenovaný export ref z balíčku vue. Jméno bez ./ je balíček, knihovna nainstalovaná v projektu.
• import App from "./App.vue"; v main.js importuje výchozí export App.vue: komponentu.
• import "./style.css"; neimportuje nic pod žádným jménem. Jen přidá styly na stránku.

Kde je ale export v App.vue? Ten nepíšete: <script setup> komponentu exportuje sám, jako výchozí export souboru. Proto je import PolozkaMenu from "./PolozkaMenu.vue"; bez závorek. A vlastní exporty <script setup> mít nemůže, červený pruh by hlásil <script setup> cannot contain ES module exports. Hodnoty, které potřebuje víc komponent, patří do souboru .js, jako je tady kavarna.js.

A přípona? Vite, nástroj, který projekty ve Vue spouští na vašem počítači, najde soubor .js i bez ní, ale soubor .vue jen s ní. Aby to bylo jednoduché, pište ji v každém importu vlastních souborů.