# State

# Store Architektur und State Management

State Management

Eine Shopseite enthält eine Vielzahl an ineinander verschachtelter Komponenten, deren Anordnung und Zahl sich im Laufe der Zeit verändert. Viele dieser Komponenten benötigen dabei die gleichen Daten und haben auch oft den Anspruch diese zu editieren.

Damit alle Komponenten Zugriff auf diese Daten haben ohne diese immer wieder als Properties weiterreichen zu müssen, setzt hubble auf die State Management Lösung Vuex. Dabei ist Vuex fester Bestandteil von NuxtJS (Vuex Store in Nuxt (opens new window)) und dadurch bereits vorkonfiguriert: Dateien, die sich im Ordner ~/store/ befinden, werden automatisch als Vuex Modul registriert.

Die von den Seiten und Komponenten benötigten Daten befinden sich in state Objekten im Vuex Store. In der hubble Architektur existieren dabei je nach Entität (Produkt, Kategorie, Kunde etc.) getrennte Store Module unter ~/modules/@hubblecommerce/hubble/core/store/.

Ein Auszug der Vuex Store Module, die sich durch die Entitäten ableiten lassen:

Store Module
modCart
modSearch
modNavigation
modWishlist
modCustomer
modCategory
modApiProduct
modApiPayment
modPrices
modCookieNotice

Daten werden in States gespeichert. Änderungen am State können nur mithilfe von Funktionen vorgenommen werden. Dafür existieren verschiedene Arten von Funktionen die für die jeweilige Tätigkeit aufgerufen werden: getters, actions und mutations.

Der Aufbau eines Vuex Store Moduls ist wie folgt:

export default function (ctx) {
    const modWishlist = {
        namespaced: true,
        state: () => ({
            wishlistItemsCount: 0,
            wishlistItemsObj: {},
            wishlistId: false,

            cookieName: 'hubbleWishlist',
            localStorageLifetime: 720 // 720 hours = 30 days
        }),
        getters: {...},
        mutations: {...},
        actions: {...}
    };

    ctx.store.registerModule('modWishlist', modWishlist);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Dieser Konvention von Vuex folgend, werden somit alle Store Interaktionen über die passende Funktionsart durchgeführt.
Für eine vereinfachte Syntax nutzt hubble in Komponenten die Vuex map helper:

// ~/components/customer/LoginForm.vue
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
    computed: {
        ...mapState({
            customer: state => state.modApiCustomer.customer,
            wishlistState: state => state.modWishlist.wishlistItemsObj
        })
    },
    
    methods: {
        ...mapActions({
            logIn: 'modApiCustomer/logIn',
            getWishlist: 'modApiCustomer/getWishlist',
            updateWishlist: 'modApiCustomer/updateWishlist',
            saveToStore: 'modWishlist/saveToStore'
        }),
        ...mapMutations({
            setWishlistId: 'modWishlist/setWishlistId',
            setWishlistItemsCount: 'modWishlist/setWishlistItemsCount',
            setWishlistItemsObj: 'modWishlist/setWishlistItemsObj'
        }),
        // ...
        submitLoginForm: function() {
            // ...
            this.logIn(validCredentials) // uses mapped action function
            // ...
        }
    }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Nützliche Quellen: