Auora
🦄 ~ Another state manager ~ 🔥
Framework-Free
No tight coupling to any front-end framework.
Lightweight
High performance with <2kb of minified & gzipped code.
Simple
Simple to understand, simple to implement.
Extensible
Pre-built hooks for integrations with modern front-end frameworks.
Fast
Things don't always need to be complex to perform at a high level.
Scalable
Built to work with applications of all size and complexity.
Configure a Store
Use three core principles to manage state throughout your application:
- state - Data source for your application.
- actions - Functions that change state.
- events - Callbacks throughout the store lifecycle.
This example store manages a counter. There are two actions that will change the counter, along with two events that will save the history of the counter value as changes are made.
import { Store } from 'auora';
const store = new Store({
// state
state: {
count: 0,
history: [0],
operations: [],
},
// actions
actions: {
// synchronous
increment({ state }) {
state.count += 1;
return state.count;
},
// asynchronous
add({ state }, number) {
return new Promise((resolve) => {
state.count = state.count + number;
resolve(state.count);
});
},
},
// events
events: {
commit(state) {
state.history.push(state.count);
},
dispatch(state, action, ...payload) {
state.operations.push(action);
}
}
});
Apply Actions to Change State
After actions execute, they'll commit state change and dispatch events.
store.state
// {
// count: 0,
// history: [0],
// operations: [],
// }
store.apply.increment();
// {
// count: 1,
// history: [0, 1],
// operations: ['increment'],
// }
store.reset();
// {
// count: 0,
// history: [0],
// operations: [],
// }
store.apply.add(4).then(() => {
// {
// count: 0,
// history: [0, 4],
// operations: ['add'],
// }
});
Use Your Favorite Framework
Auora was built to be framework-agnostic by design.
// index.js
import Auora from 'auora/ext/vue';
import counterStore from '@/store';
Vue.use(Auora);
const app = new Vue({
el: '#app',
store: counterStore
});
<!-- Counter.vue -->
<template>
<div>
<p>{{ counter }}</p>
<button @click="increment">Increment Counter</button>
<button @click="add(5)">Add 5</button>
</div>
</template>
<script>
export default {
name: 'counter',
store: {
state: ['counter'],
actions: ['increment', 'add'],
},
}
</script>