Services

Services hold state and logic that your whole interface shares. Each service is written as a Vue component (data, computed properties, methods and lifecycle hooks). Qik starts every service once when the site loads and keeps it running as visitors move between routes. You create and edit services in the builder's Services panel.

When to use a service

• A shared data store. Load a list of products, staff or upcoming events once, then use it on every route without loading it again.
• Something that must survive navigation. An audio player, a shopping basket or a "recently viewed" list that keeps going when the visitor changes route and the block that showed it is removed from the page.
• Settings in one place. Business name, phone number, opening hours or other values you want to update once and see everywhere.

How a service is written

A service's code is a single object literal in braces, { ... }, containing Vue component options:

• data(): returns the service's state, such as items, loading and loaded.
• computed: values worked out from the state, or fixed values you want to expose.
• methods: functions, such as reload().
• Lifecycle hooks: created() runs when the service starts; mounted() runs once it is running in the visitor's browser.

Don't wrap the code in export default, and don't leave out the outer braces. Either one stops the service compiling.

Use computed properties, not getters

Plain JavaScript getters and loose properties (get address() { ... } or businessName: 'Acme' at the top level) are not available on the service, so anything that reads them shows nothing. Put fixed values and calculated values under computed, and changing state under data().

Use created() or mounted(), not init()

Older examples used an init() function. Qik never calls a function named init(). Do your start-up work in created() instead, or in mounted() for anything that needs the browser.

Server rendering

Published sites are rendered on the server first, so a service's created() also runs during that server render, where there is no window or document. Put anything that touches the browser in mounted(). That includes reading localStorage, adding window listeners and loading scripts or styles. If a service throws an error, it doesn't start, but the rest of the page still renders.

Accessing a service

Every service is available at $sdk.app.services.<keyName>, where the key name is the one you set in the Services panel.

• In an HTML template (Custom Code, your own blocks or components): {{ $sdk.app.services.basicDetails.businessName }}
• In component JavaScript: this.$sdk.app.services.basicDetails. It's tidiest to expose it through a computed property; see the example below.
• Inside a service: the SDK is available as the plain variable $sdk (no this.). Use it to load content ($sdk.content.list(...)), read the current route ($sdk.app.route) or reach other services ($sdk.app.services.otherService).

Things to know

• Each visitor gets their own copy of every service. Services don't share data between visitors, and nothing is saved when the visitor closes the page. To keep data, store it in Qik content.
• A service loads content with the permissions of the application, or of the visitor once they sign in. If a list comes back empty, check the application's permissions; see Emulation, Context and Permissions.
• Published sites cache the interface for a few minutes, so a service change may take up to about five minutes to show after you publish.

Examples

<div>
    <strong>{{ $sdk.app.services.basicDetails.businessName }}</strong>
    <div>{{ $sdk.app.services.basicDetails.address }}</div>
</div>

// A 'basicDetails' service
{
    computed: {
        businessName() {
            return 'Acme';
        },
        phoneNumber() {
            return '123456789';
        },
        emailAddress() {
            return 'hello@example.com';
        },
        country() {
            return 'Australia';
        },
        address() {
            return `123 Road Street, Villageville, ${this.country}`;
        },
    },
}

<div v-if="$sdk.app.services.dataService.loading">
    Loading articles
</div>
<div v-else>
    <div v-for="article in $sdk.app.services.dataService.items" :key="article._id">
        <h3>{{ article.title }}</h3>
        <div v-html="article.body" />
    </div>
</div>

// A 'dataService' service
{
    data() {
        return {
            items: [],
            loading: false,
            loaded: false,
        };
    },
    created() {
        // Load the articles as soon as the service starts
        this.reload();
    },
    methods: {
        async reload() {
            if (this.loading) {
                // Already loading
                return;
            }

            this.loading = true;
            this.loaded = false;

            // Load the articles this application can see
            const { items } = await $sdk.content.list('article', {
                select: ['title', 'data', 'body', 'meta'],
                page: { size: 20 },
            });

            this.items = items;
            this.loading = false;
            this.loaded = true;
        },
    },
}

<p>Call us on {{ details.phoneNumber }}</p>

{
    computed: {
        details() {
            return this.$sdk.app.services.basicDetails;
        },
    },
}

FAQs