Custom store logic in Svelte - Mini Project: Build & Apply

Custom store logic

📖 Scenario: You are building a simple Svelte app that tracks a user's score in a game. You want to create a custom store to manage the score with special logic.

🎯 Goal: Create a custom Svelte store called scoreStore that holds a numeric score starting at 0. Add a method increment to increase the score by 1. Use this store in a Svelte component to display the score and a button to increase it.

📋 What You'll Learn

Create a custom store named scoreStore using Svelte's writable function.

Initialize the store value to 0.

Add a method increment inside the store to add 1 to the current score.

Use the store in a Svelte component to display the current score.

Add a button that calls scoreStore.increment() when clicked to increase the score.

💡 Why This Matters

🌍 Real World

Custom stores let you manage complex state logic in Svelte apps, like game scores, user preferences, or form data.

💼 Career

Understanding custom stores is key for Svelte developers to build maintainable and interactive web applications.

1

Create the initial store

Import writable from 'svelte/store' and create a custom store called scoreStore with an initial value of 0.

Svelte

import { writable } from 'svelte/store'

// Create scoreStore with initial value 0
// Your code here

Hint

Use writable(0) to create a store starting at zero.

2

Add increment method to the store

Inside the createScoreStore function, add a method called increment that uses update to increase the score by 1.

Svelte

import { writable } from 'svelte/store'

function createScoreStore() {
    const { subscribe, set, update } = writable(0)
    return {
        subscribe,
        set,
        update,
        // Add increment method here
    }
}

export const scoreStore = createScoreStore()

Hint

Use increment: () => update(n => n + 1) to add the method.

3

Use the store in a Svelte component

In a Svelte component, import scoreStore and use the $scoreStore syntax to display the current score inside a <p> tag.

Svelte

import { writable } from 'svelte/store'

function createScoreStore() {
    const { subscribe, set, update } = writable(0)
    return {
        subscribe,
        set,
        update,
        increment: () => update(n => n + 1)
    }
}

export const scoreStore = createScoreStore()


import { scoreStore } from './scoreStore.js'

// Use the store here
// Your code here


Score: {$scoreStore}

Hint

Use {$scoreStore} inside the markup to show the current score.

4

Add button to increment the score

Add a <button> element that calls scoreStore.increment() when clicked to increase the score.

Svelte

import { writable } from 'svelte/store'

function createScoreStore() {
    const { subscribe, set, update } = writable(0)
    return {
        subscribe,
        set,
        update,
        increment: () => update(n => n + 1)
    }
}

export const scoreStore = createScoreStore()


import { scoreStore } from './scoreStore.js'

// Add button click handler here
// Your code here


Score: {$scoreStore}

Hint

Use <button on:click={() => scoreStore.increment()}> to call the increment method.