# Configuration Files and Stores

**Quick summary:** Learn to centralize data with configuration files and manage reactive state with stores for persistent data storage.

---

## Introduction to data management

This tutorial demonstrates how to use configuration files for centralized static values and stores for reactive, persistent data management in your application.

## 1. Configuration files basics

### What are configuration files?
Configuration files allow you to centralize values that are reused throughout your application. Change the value once, and it updates everywhere automatically.

### Creating your first configuration file
1. Click **+** to add a new configuration file
2. Click **Key 0** to rename it to something meaningful (e.g., "name")
3. Set the **Type**: String
4. Enter a **Value**: e.g., "mybilliondollarcompany"

### Using configuration values in components
1. Create a new component
2. Add a variable and select your configuration value
3. Switch to **Preview**: The value displays automatically
4. **Key benefit**: This value is now centralized and reusable

### Using configuration in Visual Scripting
1. Go to the **Logic** tab
2. Add a **Get** node for your configuration (e.g., "get new config")
3. **Spread the object** to access its properties
4. Press **Ctrl + Space** to verify the value
5. Access the specific property (e.g., "name")

### Testing centralization
1. Return to your configuration file
2. Change the value (e.g., from "mybilliondollarcompany" to "LunaPark")
3. Go back to your component
4. **Result**: The value is automatically updated everywhere it's used

**Use case**: Perfect for app names, API endpoints, feature flags, or any value used across multiple components.

## 2. Understanding stores

### What makes stores different?
Stores are like configuration files but with reactive capabilities and persistence options:
- **Memory**: Resets when page reloads
- **Session**: Persists within the same browser tab
- **Local**: Persists across page reloads and browser sessions (stored on user's computer)

### Storage scope limitations
- **Local storage** is computer-specific
- Data doesn't sync across different browsers
- Data remains only in the browser where it was created

## 3. Building a to-do list with stores

### Creating the store structure
1. Create a new store
2. Add a **tasks** property with type: Array of Objects
3. Define the object structure:
    - **icon**: String or emoji
    - **text**: String

### Understanding store views
- **Left side**: Default values (initial state)
- **Right side**: Real-time values (current state)

### Setting default values
1. Add a default task object:
    - icon: "📝"
    - text: "finish the tutorial"
2. Click **Reset preview** to load the default values

### Key difference from configuration files
**Stores are reactive**: When you change a value, it updates everywhere instantly.

## 4. Templates for dynamic rendering

### What are templates?
Templates enable two powerful rendering patterns:
1. **Conditional rendering**: Display content only if a condition is true
2. **Loop rendering**: Repeat content for each item in an array

### Using a For loop template
1. Create a component
2. Add a template with type: **For**
3. Set the data source to your store's tasks array
4. **Result**: The template repeats for each task

### Accessing template variables
Templates automatically generate two variables:
- **Index**: Position in array (0, 1, 2, etc.)
- **Value**: The current item's data

### Displaying task data
1. Inside the template, add a **Card** widget
2. Add elements to display:
    - Icon from `value.icon`
    - Text from `value.text`
3. **Result**: Each task renders in its own card

## 5. Adding tasks dynamically

### Creating the input form
1. Create two component variables:
    - **icon**: String (for emoji picker)
    - **text**: String (for text input)
2. Add a new **Card** container
3. Inside the card, add form elements:
    - **Emoji picker** bound to `icon` variable
    - **Text input** bound to `text` variable
    - **Button** labeled "Add task"

### Improving the form layout
1. Wrap inputs in a **Flex container**
2. Set direction to horizontal
3. Add a **gap** for spacing between elements
4. Give the text input a minimum width

## 6. Implementing add task logic

### Setting up the click event
1. Select your "Add task" button
2. Add a **Click** event
3. Open the **Logic editor**

### Building the add task flow
1. Add **Get new store** node and spread it
2. Access the **tasks** property
3. Add a **Push** node to append to the array
4. Create the new task object:
    - Add **Create Object** node
    - Add **Get icon** from component
    - Add **Get text** from component
5. Connect the created object to the Push node

### Optional: Resetting input fields
After adding a task, reset the form:
1. Add **Set icon** node with empty string value
2. Add **Set text** node with empty string value
3. **Result**: Form clears after each task addition

## 7. Testing the complete system

### Adding your first task
1. Enter an emoji (e.g., ✈️)
2. Enter text: "Go to Canada"
3. Click **Add task**
4. **Result**: Task appears instantly in the list below

### Verifying persistence
1. Add several tasks
2. Press **F5** to reload the page
3. **Result**: All tasks remain because we used local storage
4. **Important**: This works only in the same browser on the same computer

### Understanding the reactive flow
1. Form inputs update component variables
2. Click event triggers the logic
3. Logic pushes new object to store
4. Template automatically re-renders with new data
5. Form fields reset to empty state

## Key concepts

### Configuration files
- **Static centralized values**: App name, settings, constants
- **Single source of truth**: Update once, change everywhere
- **No reactivity**: Values don't change during runtime
- **Access via Get node**: Simple retrieval in logic

### Stores
- **Reactive data storage**: Values update everywhere automatically
- **Three persistence modes**: Memory, Session, Local
- **Real-time synchronization**: Changes reflect immediately
- **Persistent state**: Data survives page reloads (with local storage)

### Templates
- **For loops**: Render lists dynamically
- **Conditional rendering**: Show/hide based on conditions
- **Auto-generated variables**: Index and value for each iteration
- **Reactive updates**: Re-renders when data changes

### Storage persistence
- **Memory**: Temporary, resets on reload
- **Session**: Per-tab, resets when tab closes
- **Local**: Permanent in browser, survives reloads

## Best practices

### Choosing between configuration and stores
- **Use configuration files** for static values that never change at runtime
- **Use stores** for data that changes based on user interactions
- **Use stores with local storage** for data that should persist between sessions

### Store structure design
- **Plan your data schema** before creating the store
- **Use meaningful property names** for clarity
- **Keep stores focused** on specific features (e.g., one store for tasks, another for user settings)

### Template optimization
- **Use For templates** for lists and arrays
- **Use If templates** for conditional content
- **Keep template content simple** for better performance
- **Access only needed properties** from the value object

### Data persistence strategy
- **Memory**: Shopping cart data, temporary UI state
- **Session**: Form data during multi-step processes
- **Local**: User preferences, saved work, to-do lists

### Form handling
- **Always reset inputs** after successful submission
- **Validate data** before adding to stores
- **Provide feedback** to users when actions complete
- **Use appropriate input types** (emoji picker for icons, text input for text)