---
title: "Data Sharing and Global Actions Management | LemonadeJS v5"
description: "LemonadeJS v5 archive. Simplify global property and action management with Sugar. Facilitate data sharing, state persistence, centralized debugging, and."
source: https://lemonadejs.com/docs/v5/sugar/
---
# Sugar
## Super Global Artifacts
Sugar is a communication system in LemonadeJS that enables state sharing between components using a **pub/sub pattern**.
Components subscribe to named events with `set` and trigger updates using `dispatch`, allowing state synchronization across
the application. Components automatically update when changes are dispatched to their subscribed events.
### Examples
#### Scope
##### Public Scope
In this example, the Profile component is globally registered with the alias `My:Profile`, making it accessible throughout the application. The Loader component retrieves the registered Profile instance and updates its properties directly.
```html
```
```javascript
import lemonade from 'lemonadejs';
function Profile() {
// Register the self under My:Profile alias
lemonade.set('My:Profile', this);
// Counter is created from the attribute counter
return render => render``;
}
function Loader() {
const load = function() {
// Get My:Profile self
let s = lemonade.get('My:Profile');
// Updates directly to the self properties
s.name = 'John Lennon';
s.email = 'john.lennon@beatles.com';
}
return render => render`
`;
}
lemonade.setComponents({ Profile, Loader });
export default function App() {
return render => render`
`;
}
```
##### Private Scope
Exposing the entire component object globally can raise security concerns. Instead, securely register specific actions to update properties or execute functions using the dispatch method.
```html
```
```javascript
import lemonade,{ set, dispatch } from 'lemonadejs';
function Profile() {
set('profile:updateName', (s) => {
this.name = s.name;
});
// Counter is created from the attribute counter
return render => render``;
}
function Loader() {
const update = function() {
// Send new values to another component using the dispatcher
dispatch('profile:updateName', {
name: 'John Lennon'
});
}
return render => render`
`;
}
lemonade.setComponents({ Profile, Loader });
export default function App() {
return render => render`
`;
}
```
### Persistence
To illustrate this concept, we'll use an example similar to the one above, utilizing the persistence flag to maintain the last dispatched data saved, even after a page refresh.
```html
```
## Summary of This Chapter
This chapter explores key aspects of Sugar:
- **Global Access**: Leverage Sugar's set and get methods to make `self` properties globally accessible across components.
- **Action Registration**: Register actions to make them available across different components.
- **Data Dispatchers**: Execute cross-component actions while preserving their private scope and ensuring security and encapsulation.
- **Persistent State**: Utilize the persistence flag to retain the latest data state.
## What's Next?
Learn more about unit testing with LemonadeJS.\
\
[Unit testing](/docs/v5/tests/)