Options API #

Ahhoz, hogy a komponensünket megadhassuk, az egyik lehetőségünk az Options API, amely object-ek segítségével definiálja az alkalmazásunkat vagy komponensünket.

Állapotok #

Az alkalmazáshoz vagy a komponenshez tartozó állapotainkat a data() függvény segítségével tudjuk tárolni. A függvényünk mindig egy objectet fog visszaadni, annak érdekében, hogy folyamatosan tudjuk frissíteni őket.

Például:

const App = {
    data(){
        return {
            counter: 0,
            firstRun: true,
            name: "Zsombor"
        }
    }
}

Számított állapotok #

Tudunk több állaptból is egy teljesen új állapotot számítani, ezeket úgy tudjuk megtenni, hogy a computed object-ben felvesszük őket függvényként. Egy számított állapotot jelző függvénynek midnig van visszatérési értéke.

Példa:

const App = {
    data(){
        return{
            elements: ["elem1","elem2","elem3"]
        }
    },
    computed:{
        numberOfElements(){
            return this.elements.lenght;
        }
    }
}

A függvények felvétele #

Tudunk függvényeket is definiálni, például amit felhasználunk az állapotaink manipulásához, például adatok lekérése API-ról vagy eseménykezelés. Ezeket a methods objectben fogjuk elhelyezni.

Példa:

const App = {
    methods: {
        sum(a,b){
            return a+b;
        },
        mul(a,b){
            return a*b;
        }
    }
}

Állapotváltozások figyelése #

A watch segítségével, meg tudunk figyelni állapotokat és tudunk reagálni a változásukra. Figyelni kell rá, hogy a figyelni kívánt állapotot adjuk meg a függvény nevének. Valamint ezek a függvények 1 vagy két paraméterrel rendelkezhetnek, ha csak egy paraméterünk van, akkor mindig az új értéket kapjuk meg, kettő esetén, először az új, aztán pedig a régi értéket fogjuk elérni.

Példa:

const App = {
    data(){
        return{
            name: "Papp Zsombor"
        }
    },
    watch:{
        name(val,oldVal){
            console.log(`Regi ertek: ${oldVal}. Uj: ${val}`)
        }
    }
}

Ellenőrző kérdések #

1. Mit csinál a data()?
2. Miért kell a data()-ban mindig objektumot visszaadni?
3. Mi a különség a függvények és a számított állapotok között?
4. Hogyan figyelhetünk egy állapotot?
5. Mire kell odafigyelni, a watch-ban létrehozott függvények esetén?

\pagebreak