A library providing Vue applications with asynchronous-first state management

Overview

OverVue

OverVue is a stream-based persistent state management library for Vue built on RxJS observables.

While Vuex provides a robust option for handling state in Vue applications, persistence requires third-party plugin support. The OverVue state management library includes persisted state out of the box.

OverVue leverages an RxJS Observable stream to manage synchronous and asynchronous updates to state and easily integrates with Vue applications. With OverVue, all actions are emitted to our single source of truth, the motherstream, along with any Observables contained therein. This allows users to easily assimilate Observables into their Vue applications while maintaining the Flux-based architecture most conducive to Vue.

Disclaimer

OverVue is in the early stages of development. We welcome any constructive feedback and encourage users to open issues or submit pull requests in order to contribute to the ongoing evolution of OverVue.

Getting Started

npm install --save overvue-rx

Create a central store

Creating your store is a simple two-step process with OverVue:

In your store file, import OverVue and connect it using the Vue.use() global method.

import Vue from 'vue';
import { Overvue, Store } from 'overvue-rx';

Vue.use(Overvue);

Next, in the file containing your root Vue instantiation, pass your mutate methods into createStateStream and subscribe to the store. Be sure to import the relevant files and set the store as a property in your root Vue instantiation. This makes the store accessible in all components.

import store from './store';
import mutate from './mutate';

store.createStateStream(mutate).subscribe();

const app = new Vue({
  el: '#App',
  store,
  router,
  render: h => h(Container),
});

Dispatch actions

All dispatched actions will be emitted and mapped into OverVue's motherstream. Users simply call the dispatchAction method from the store and pass in a callback function, which will return an object containing type and payload to be used as state update instructions to the user-defined mutators. The following is a simple example of how to declare an action in OverVue:

export const commitUsername = store.dispatchAction(payload => ({
  type: 'SET_USERNAME',
  payload,
}));

In this example, commitUsername can be easily imported into any file requiring it and utilized in the same way one would use actions in any Flux-based state management library.

Commit mutations

As in other Flux-based state management libraries, state is never directly effected by dispatched actions. Rather, actions commit mutators which mutate state and save the new state object in session storage, allowing it to persist through page reloads. This allows actions to perform complex asynchronous tasks without the risk of state being inappropriately changed.

This is an example of how a committed mutate method will handle a dispatched action:

export default function mutate(state, action) {
  switch (action.type) {
    case 'SET_USERNAME':
      state.username = action.payload.username;
      return state;
};

And that's it!

You might also like...
Simple counter with Vue.js and Vuex as state management

vuex-counter Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Li

A find Coach is a vue state management project that allows users to find coach to mentor a student

A find Coach is a vue state management project that allows users to find coach to mentor a student. A simple vue app with routing functionality and vuex management for solid SPA

State Management made eXtraordinarily simple and effective for Angular, React, and Vue
State Management made eXtraordinarily simple and effective for Angular, React, and Vue

XSM - State Management made eXtraordinarily simple and effective for Angular, React, Vue, and Svelte. 🏠 Homepage Demos Angular React Svelte Vue Realw

Helper functions to ease working with Vuex, Centralized State Management for Vue.js.

vuex-helpers Helper functions to ease working with Vuex, Centralized State Management for Vue.js. Development The following examples use docker and do

A very simple but powerful state management for vuejs projects.
A very simple but powerful state management for vuejs projects.

Vuez A Simple but Powerful State Management for Vue.js projects. Vuez is a very simple but powerful state management library for Vue.js projects. Vuez

:rabbit2: A tiny, light and handy state management for vuejs 2, writing less verbose code.

revuejs 🐇 A tiny, light and handy state management for vuejs 2, writing less verbose code. Installation Install the pkg with npm: npm install revuejs

Local state management within Vuex

vuex-local Local state management within Vuex Why? Global state management is one of the problems on huge application development. Developers address

Simplify vuex loading state management

vuex-loading Simplify vuex loading state management Installing Using npm: $ npm install vuex-loadings -s Know Simplify vuex loading state management n

Type-safe reactive state management

rxsv Framework agnostic minimal state management library based on RxJS, heavily inspired by Redux and Redux-Observable with limited boilerplate and Ty

Owner
null
A state management library for react inspired by vue 3.0 reactivity api and immer

Welcome to costate ?? A state management library for react inspired by vue 3.0 reactivity api and immer costate is a tiny package that allows you to w

工业聚 7 Mar 29, 2022
A tiny state management library for Vue Composition API.

vue-unstated A tiny state management library for Vue Composition API based on unstated-next which is for React. ?? Demo ?? Installation $ npm install

Xuesu Li 30 Jan 28, 2023
A state management library for React combined immutable, mutable and reactive mode

Welcome to bistate ?? Create the next immutable state tree by simply modifying the current tree bistate is a tiny package that allows you to work with

工业聚 119 Jan 8, 2023
A very simple state management library.

DoxJS DoxJS is a very easy state management library, it's written in Typescript. document Elglish document 中文文档 Install yarn yarn add doxjs npm npm in

dimos 1 Apr 3, 2018
A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth

Laravel 6 (LTS) Vue.js Frontend Boilerplate A Vue.js Frontend starter project kit template/boilerplate with Laravel 6 Backend API support. Features Re

MUWONGE HASSAN 2 Oct 12, 2021
🗃️ Centralized State Management for Vue.js.

Vuex ?? HEADS UP! You're currently looking at Vuex 3 branch. If you're looking for Vuex 4, please check out 4.0 branch. Vuex is a state management pat

vuejs 27.9k Dec 30, 2022
Elm-inspired Application State Management for Vue.js.

VuElm It's a Vue state management inspired by Elm architecture. Concepts There are basically four elements on Elm architecture: Model, Actions, Update

Keuller Magalhães 36 May 5, 2021
A light and easy shared state management plugin for Vue

vue-shared vue-shared is a tiny (~150 lines) vue plugin for shared state management, that can be used as an alternative to Vuex. It adds a new vue opt

null 11 Jan 22, 2021
State management system for Vue.js

Vue States Vue States is a state management system for Vue.js. Checkout the examples at https://github.com/JohannesLamberts/vue-states-examples. You m

sum.cumo GmbH 149 Nov 24, 2022
Simple, unopinionated, lightweight and extensible state management for Vue 3

Simple, unopinionated, lightweight and extensible state management for Vue 3

Andrew Courtice 466 Dec 30, 2022