A global reactive state container. Access via $store in any template or component.
import { createStore } from 'courvux';
const store = createStore({
state: { user: 'guest', count: 0 },
actions: {
setUser(name) { this.user = name; },
increment() { this.count++; },
reset() { this.count = 0; }
}
});
createApp({ store, template: '...' }).mount('#app');
<!-- Access in any template <!-- Access in any template -->
<p>{{ $store.user }}</p>
<p>{{ $store.count }}</p>
<!-- Two-way binding directly on store <!-- Two-way binding directly on store -->
<input cv-model="$store.user" />
<!-- Call actions <!-- Call actions -->
<button @click="$store.increment()">+</button>
<button @click="$store.setUser('Alice')">Login</button>
Organize into namespaced sub-stores. Each module is a full standalone store. State and action names in each module must be distinct.
const store = createStore({
state: { theme: 'light' },
actions: {
toggleTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
}
},
modules: {
counter: {
state: { n: 0 },
actions: {
inc() { this.n++; },
dec() { this.n--; },
reset() { this.n = 0; }
}
},
user: {
state: { name: 'guest', role: 'viewer' },
actions: {
login(name, role) { this.name = name; this.role = role; }
}
}
}
});
<!-- Module state and actions <!-- Module state and actions -->
<p>Count: {{ $store.counter.n }}</p>
<p>Role: {{ $store.user.role }}</p>
<button @click="$store.counter.inc()">+</button>
<button @click="$store.user.login('Alice', 'admin')">Login</button>
// Named export — use outside components
import { batchUpdate } from 'courvux';
batchUpdate(() => {
store.counter.n = 0;
store.user.role = 'viewer';
});
Alternative to the store for passing values deep into the tree without threading props through every level.
// Provide / Inject — pass data deep without threading props
// Root app
createApp({
provide: {
theme: 'dark',
apiUrl: 'https://api.example.com'
}
})
// Or as a function for reactive values
{
provide() {
return { currentUser: this.user };
}
}
// Any descendant
{ inject: ['theme', 'apiUrl'] }
// Object form — rename on injection
{ inject: { localTheme: 'theme', endpoint: 'apiUrl' } }