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>