---
url: https://lune-js.com/advanced/global-state.md
---
# Global State Management

You can use the `reactive` method (re-exported from `@lune-js/core`) to create global state singletons.

## Creating Global State

```js
import { createApp, reactive } from "lune-js";

const store = reactive({
  count: 0,
  inc() {
    this.count++;
  }
});

// manipulate it here
store.inc();

createApp({
  // share it with app scopes
  store
}).mount();
```

## Using in Components

```html
<div lu-scope="{ localCount: 0 }">
  <p>Global {{ store.count }}</p>
  <button @click="store.inc">increment</button>

  <p>Local {{ localCount }}</p>
  <button @click="localCount++">increment</button>
</div>
```

## effect

Use `effect` to re-run a function every time its dependencies change.

```js
import { effect, reactive } from "lune-js";

const store = reactive({
  count: 0
});

effect(() => {
  console.log(store.count);
});

store.count++; // logs 1
```

## Sharing State Between Apps

Since the state is just a JavaScript object, you can share it between multiple `createApp` instances on the same page.

```js
const store = reactive({ count: 0 });

createApp({ store }).mount("#app1");
createApp({ store }).mount("#app2");
```

Now, updating `store.count` in `#app1` will automatically update `#app2`.