MAD II : W3

Disclaimer: These notes were generated by AI based on the provided

transcripts and slides.

1. State Management in an Application

Definition & Concept
State is all the internal information and data that a system needs to remember
to function. At any given moment, the "state" is a snapshot of all the values in
memory (e.g., variables, database contents) that define the system's current
condition.
The main purpose of state is reproducibility: given the exact same state, a
system should always produce the same output or response to the same user
input. As applications become more complex than just simple static pages, they
must manage state.

Examples: The Three Levels of State

State is not one single thing. It's helpful to think of it in three distinct levels,
from broadest to most specific.

A. System State (The "Single Source of Truth")

What it is: This is the complete, comprehensive database for the entire
service, independent of any single user. It's the "master" data.

Simple Example: All user accounts and posts on a social media website.

Advanced Example: The entire product catalog, inventory levels, pricing

rules, and registered user database for an e-commerce giant like Amazon
or Flipkart.

Key Property: This state is persistent, huge, and lives on the server. The
frontend is not responsible for storing or managing it, only for requesting
and displaying pieces of it.

B. Application State (The "User Session")

MAD II : W3 1
 What it is: This is the specific subset of data that is relevant to a single
user's active session. It includes their preferences, interactivity, and data
they are in the process of creating.

Simple Example: The items you have added to your shopping cart.

Advanced Example: A user's dashboard preferences, any news articles

they've "followed," custom recommendations generated for them, or the
theme (e.g., "Dark Mode") they have selected.

Key Property: This state defines the user's personal experience. It's the
"system as seen by an individual."

C. UI State (Ephemeral State)

What it is: This is the most temporary, short-lived state, related only to
what is happening on the UI at this very second. "Ephemeral" means lasting
for a very short time.

Simple Example: A "loading" spinner that is visible only while data is being
fetched.

Advanced Example: The currently selected tab in a settings menu, whether

a dropdown is open or closed, or the text a user has typed into a form field
before clicking "Submit."

Key Property: This state is often managed entirely within the client-side
(frontend) and can be discarded and re-created frequently without any
long-term consequence.

Comparisons: State Scope

Where is it
State Type Scope Example
Managed?

Entire Application (all All products in an e-

System State Server / Database
users) commerce store

Application
Single User Session Server & Client Your shopping cart
State

"Is this dropdown menu

UI State Specific UI Elements Client (Frontend)
open?"

Special Properties: The Problem of HTTP

MAD II : W3 2
 The HyperText Transfer Protocol (HTTP) is stateless. This is a critical
concept.

This means each request from a client (your browser) to a server is treated
as a completely independent, new event. The server has no built-in
memory of your previous requests.

This is why state management is so important. We have to manually build

mechanisms (like sessions, cookies, or tokens) to tell the server who we are
with every single request, allowing it to retrieve our correct Application
State (like our shopping cart) from the System State (the database).

Key Takeaways
State is the "memory" of your application.

It's useful to categorize state into three levels:

1. System State: The entire database (server).

2. Application State: A single user's session data (server + client).

3. UI State: Temporary interface details (client).

The web's underlying protocol (HTTP) is stateless, which is the central

problem that frontend frameworks like Vue help solve by managing state on
the client side.

2. Introduction to [Link] Components

Definition & Concept
A Vue Component is a reusable, self-contained "block" of your user interface.
It bundles its own:

1. Template: The HTML structure.

2. Script: The JavaScript logic and data.

3. Style: The CSS appearance (optional).

The entire "Hello World" application you built in the transcript was technically a
single root component (the new Vue({...}) instance). The real power of Vue comes
from building an application by composing many small, nested components,
like building with LEGO bricks.

MAD II : W3 3
 Examples (Simple to Advanced)
Let's start from the "Hello World" app and improve it with components.

A. Simple: A Global Component

You can register a component globally, making it available anywhere in your
app. This is good for simple, reusable elements.

JavaScript ( [Link] ):

// 1. Define and register the component GLOBALLY

// The component is named 'button-counter'
[Link]("button-counter", {
// 2. Data MUST be a function that returns an object
data: function () {
return {
count: 0,
};
},
// 3. The template for this component
template:
'<button v-on:click="count++">You clicked me {{ count }} times</button
>',
});

// The root Vue instance (our root component)

var app = new Vue({
el: "#app",
});

HTML ( [Link] ):

<div id="app">
<p>Here are some reusable counters:</p>
<!-- 4. Use the component like a custom HTML tag --
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

MAD II : W3 4
 </div>

How it works: Vue sees the <button-counter> tags and replaces each one with
an independent instance of your component. Each button has its own
separate count in its data .

B. Advanced: Local Components with Props and Events

This is the more common and powerful way. You define components as objects
and "register" them locally in the parent that uses them. This example refactors
the "visitor list" from your demo.

HTML ( [Link] ):

<div id="app">
<!-- ... (input form) ... --

<!--
1. We loop over the visitors list.
2. We 'v-bind' (or just ':') the 'visitor' object to a 'prop' called 'visitor-dat
a'.
3. We listen for a custom event 'remove-visitor' from the component.
--
<ul>
<visitor-item
v-for="visitor in visitors"
v-bind:key="[Link]"
v-bind:visitor-data="visitor"
v-on:remove-visitor="handleRemove"
></visitor-item>
</ul>
</div>

JavaScript ( [Link] ):

// 1. Define our component as a simple object

const VisitorItem = {
// 2. 'props' are how a parent passes data DOWN to a child.

MAD II : W3 5
 // We are "declaring" that we expect a 'visitor-data' prop.
props: ['visitor-data'],

// 3. This is the template for ONE visitor item.

// It displays the data it received via its prop.
template: `
<li>
{{ [Link] }}
<!-- 4. On click, we emit an event UP to the parent -->
<button v-on:click="$emit('remove-visitor', [Link])">
Remove
</button>
</li>
`
};

var app = new Vue({

el: '#app',

// 5. We register our component LOCALLY

// This means <visitor-item> only works inside the #app div
components: {
'visitor-item': VisitorItem
},

data: {
visitors: [
{ id: 1, name: 'Raj' },
{ id: 2, name: 'Thej' },
{ id: 3, name: 'Fatima' }
]
},

methods: {
// 6. This method runs when the child component emits the 'remove-visit
or' event
handleRemove: function (visitorId) {
// We filter the visitors list to remove the one with the matching id

MAD II : W3 6
 [Link] = [Link](v => [Link] !== visitorId);
}
}
});

Edge Cases & Special Properties

1. data MUST be a Function: In a component (anything except new Vue ), the
data property must be a function ( data: function() { return {...} } ). This is so every
instance of the component gets a fresh copy of the data. If it were just an
object, all instances would share the same data, which would be a bug.

2. One-Way Data Flow (Props): Data flows down from Parent to Child via
Props. A child component should never directly change a prop (e.g.,
[Link] = "new value" ). This is considered an anti-pattern.

3. Events Up (Events): To communicate up from Child to Parent, the child

emits an event (e.g., this.$emit('some-event-name', dataToSend) ). The parent then
listens for that event (e.g., v-on:some-event-name="..." ).

4. key Attribute: When using v-for with components, you must provide a
unique key (like v-bind:key="[Link]" ). This helps Vue efficiently track, update,
and re-order the list items.

Key Takeaways
Components are the core concept of Vue. They let you build a large app
from small, reusable, manageable pieces.

Props Down: Parents pass data down to children using props .

Events Up: Children communicate up to parents using $emit .

In components, data must be a function to ensure each instance has its

own state.

Always use a unique key with v-for loops.

MAD II : W3 7