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.

Practice

1. What does the $ prefix do when used with a Svelte store inside a component?

easy

A. It automatically subscribes to the store and updates the value reactively.

B. It creates a new store with the same value.

C. It unsubscribes from the store to stop updates.

D. It converts the store value to a string.

Solution

1. Step 1: Understand the role of the $ prefix

   The $ prefix in Svelte is used to auto-subscribe to a store and unwrap its current value.

2. Step 2: Recognize reactive updates

   Using $store makes the component update automatically when the store value changes, without manual subscription.

3. Final Answer:

   It automatically subscribes to the store and updates the value reactively. -> Option A

4. Quick Check:

   Auto-subscription = It automatically subscribes to the store and updates the value reactively. [OK]

Hint: Remember: $ means auto-subscribe and unwrap store value [OK]

Common Mistakes:

• Thinking $ creates a new store
• Believing $ unsubscribes from the store
• Assuming $ converts value to string

2. Which of the following is the correct syntax to use the $ prefix with a Svelte store named count inside a component?

easy

A. let value = count.$;

B. let value = count$;

C. let value = $count;

D. let value = $count();

Solution

1. Step 1: Identify correct $ prefix usage

   The $ prefix is placed directly before the store variable name to unwrap its value, like $count.

2. Step 2: Check syntax correctness

   let value = $count; uses let value = $count; which is valid syntax to get the current store value reactively.

3. Final Answer:

   let value = $count; -> Option C

4. Quick Check:

   Correct $ prefix syntax = let value = $count; [OK]

Hint: Place $ directly before store name, no parentheses [OK]

Common Mistakes:

• Putting $ after the store name
• Using $ as a method call
• Adding dot before $

3. Given the following Svelte code snippet, what will be displayed when the button is clicked twice?

  
   count.update(n => n + 1)}>Increment
  
Count: {$count}

medium

A. Count: undefined

B. Count: 1

C. Count: 0

D. Count: 2

Solution

1. Step 1: Understand the initial state and update

   The store count starts at 0. Each button click increases it by 1 using count.update(n => n + 1).

2. Step 2: Calculate value after two clicks

   After two clicks, the value increments twice: 0 + 1 + 1 = 2. The {$count} auto-subscribes and shows the current value.

3. Final Answer:

   Count: 2 -> Option D

4. Quick Check:

   2 increments = Count: 2 [OK]

Hint: Each click adds 1; $count shows current value [OK]

Common Mistakes:

• Forgetting the store updates on click
• Thinking $count is static
• Assuming initial value stays

4. What is the error in the following Svelte code using the $ prefix?

  
  
Hello, {currentName}!
   name.set('Bob')}>Change Name

medium

A. The store name cannot be updated with set.

B. The variable currentName should use $name to auto-subscribe.

C. The on:click event is missing parentheses.

D. The import statement is incorrect.

Solution

1. Step 1: Identify how to access store value reactively

   The variable currentName is assigned the store itself, not its value. To get the current value reactively, it should be let currentName = $name;.

2. Step 2: Understand the effect on UI

   Without $, currentName is the store object, so the UI shows it incorrectly and does not update on changes.

3. Final Answer:

   The variable currentName should use $name to auto-subscribe. -> Option B

4. Quick Check:

   Use $ to unwrap store value = The variable currentName should use $name to auto-subscribe. [OK]

Hint: Use $ prefix to unwrap store value for reactive variables [OK]

Common Mistakes:

• Assigning store object instead of its value
• Forgetting $ prefix for reactive updates
• Misunderstanding store.set usage

5. You have two writable stores in Svelte: countA and countB. You want to display their sum reactively in a component. Which is the correct way to do this using the $ prefix?

  
  
  
Sum: ???

hard

A. <p>Sum: {$countA + $countB}</p>

B. <p>Sum: {countA + countB}</p>

C. <p>Sum: {$countA + countB}</p>

D. <p>Sum: {countA.get() + countB.get()}</p>

Solution

1. Step 1: Understand how to unwrap multiple stores

   Using $countA and $countB unwraps their current values reactively.

2. Step 2: Combine unwrapped values in expression

   Adding $countA + $countB inside curly braces calculates the sum reactively and updates UI on changes.

3. Final Answer:

   <p>Sum: {$countA + $countB}</p> -> Option A

4. Quick Check:

   Use $ on both stores to sum reactively = <p>Sum: {$countA + $countB}</p> [OK]

Hint: Use $ on each store to unwrap before adding [OK]

Common Mistakes:

• Adding store objects instead of values
• Mixing $ prefix on only one store
• Using .get() which is not a Svelte store method