Auto-subscription with $ prefix in Svelte - Mini Project: Build & Apply

Auto-subscription with $ prefix in Svelte

📖 Scenario: You are building a simple Svelte app that shows a live count of items in a shopping cart. The count updates automatically when the cart changes.

🎯 Goal: Create a Svelte component that uses a writable store to hold the cart count. Use the $ prefix to auto-subscribe and display the count in the component.

📋 What You'll Learn

Create a writable store named cartCount with initial value 0

Create a variable increment that adds 1 to cartCount

Use the $ prefix to auto-subscribe to cartCount and display its value in the component

Add a button that calls increment when clicked

💡 Why This Matters

🌍 Real World

Stores and auto-subscription are used in Svelte apps to keep UI in sync with data without manual event handling.

💼 Career

Understanding Svelte stores and the $ prefix is essential for building reactive, maintainable user interfaces in modern web development.

1

Create the cartCount store

Import writable from 'svelte/store' and create a store called cartCount with initial value 0.

Svelte

import { writable } from 'svelte/store'

// Your code here

Hint

Use const cartCount = writable(0) to create the store.

2

Create the increment function

Add a function called increment that updates cartCount by adding 1 using its update method.

Svelte

import { writable } from 'svelte/store'

const cartCount = writable(0)

// Create increment function to add 1 to cartCount
// Your code here

Hint

Use cartCount.update(n => n + 1) inside the increment function.

3

Use $ prefix to auto-subscribe and display count

In the Svelte component, use the $ prefix with cartCount to auto-subscribe and display the current count inside a <p> tag.

Svelte

import { writable } from 'svelte/store'

const cartCount = writable(0)

function increment() {
    cartCount.update(n => n + 1)
}

Cart count: {$cartCount} 

Hint

Use {$cartCount} inside the paragraph to show the current count.

4

Add a button to increment the count

Add a <button> element with text + that calls the increment function when clicked using on:click.

Svelte

import { writable } from 'svelte/store'

const cartCount = writable(0)

function increment() {
    cartCount.update(n => n + 1)
}

Cart count: {$cartCount}

Hint

Use <button on:click={increment}>+</button> to add the button.