Dynamic Data Storage

Build on top of the pinia library this dynamic data storage module handles everything about data inside the Component Renderer System. It provides reactive, cached access to API results and utilities for accessing or setting values deeply via path strings.

Overview

The store maintains:

• A registry of data keyed by string IDs
• Loading and error states for each ID
• Utilities for:
  • Fetching data from an API
  • Accessing specific values using a dot-notation path
  • Updating values in-place

---

Structure

interface DataItem {  
  loading?: boolean;  
  error?: Error | null;  
  data: any;  
  timestamp?: number;  
}  

interface DataRegistry {  
    [key: string]: DataItem;  
}

The state is shaped like:

state: () => ({  
  dataRegistry: {} as DataRegistry,  
  errors: {} as Record<string, any>
})

---

Usage

Fetching Data

Use fetchData(id, url, method?, payload?) to load data into the registry.

const store = useDynamicDataStore();  
await store.fetchData('userList', '/api/users');  

This will populate dataRegistry['userList'] with:

• The returned data
• loading set to false
• Any error encountered
• timestamp of the fetch

---

Accessing Data

Use getData(id) to access the stored data for a specific ID:

const users = store.getData('userList');  

You can also check for loading or errors:

store.isLoading('userList');  
store.hasError('userList');  
store.getError('userList');  

---

Using Path Access

If your data is deeply nested, use getValueByPath(path):

const street = store.getValueByPath('userList.0.address.street');  

You can also update values using setValueByPath(path, value):

store.setValueByPath('userList.0.address.street', 'New Street');  

This will mutate the object in-place and preserve reactivity.

---

Notes

• Fetching the same id again will overwrite the old data.
• You can prepopulate or manually manipulate the store if needed.
• For complex applications, you can derive computed values from the state for performance optimizations.

---

When to Use

• Dynamic components that depend on runtime API data
• Caching frontend API responses
• Forms or UIs driven by API results
• Lightweight global state across views

---

Best Practices

• Always use unique and descriptive ids when calling fetchData.
• Use timestamp if you want to implement expiration logic.
• Avoid overusing setValueByPath in deeply reactive structures if unnecessary.