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

Last update: May 5, 2021

Overview

revuejs

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

Installation

Install the pkg with npm:

npm install revuejs --save

or yarn

yarn add revuejs

or bower

bower install revuejs

You can also hot-link the CDN version: https://unpkg.com/revuejs/dist/index.js, Revuejs is exposed to window object.

Basic Uasage

1. create a module

// hello.js
export default {
    namespace: 'hello',
    state: {
        title: 'hello'
    },
    actions: {
        changeTitle(state, payload) {
            // return a new state
            return Object.assign({}, state, {
                title: payload.title
            });
        },

        async testAsync(state, payload) {
            await Promise.resolve(2);
            if(err) {
               return {
                   msg: 'request error'
               }
            }
            return {
                title: 'async test'
            };
        }
    }
}

2. create modules using the module you created

// modules/index.js
import Vue from 'vue';
import Revuejs, { Modules } from 'revuejs';

Vue.use(Revuejs);

import hello from 'path/to/hello';
import otherModule from 'path/to/other-module';

const modules = new Modules({
    hello,
    otherModule
    // others
});

export default modules;

3. use it with Vue instance

import Vue from 'vue';
import modules from 'path/to/modules/index';

// ...

const app = new Vue({
    // ...
    modules,
    // ...
});
app.$mount('#app');

4. combine Revuejs with Vue components

<template>
    <div>
        <h3>{{title}}</h3>
        <button @click="update">update title</button>
    </div>
</template>    
<script>
    import {mergeActions, mergeProps} from 'revuejs';

    export default {
        computed: {
            ...mergeProps(['hello.title', 'hello.info'])
            // or
            // ...mergeProps({
            //    test: 'hello.title',
            // })
        },

        methods: {
            ...mergeActions(['hello.changeTitle']),

            update(){
                this.changeTitle({
                    title: 'will be update title'
                });
            }
        }
    }
</script>

Docs

View the docs here.

Examples

Running the examples:

npm install
npm run dev # serve examples at localhost:8000

Thanks

Thanks to vuex for the head start.

LICENSE

MIT

You might also like...

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

36 May 5, 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

149 Nov 24, 2022

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

64 Nov 11, 2022

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

3 Jul 30, 2020

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

2 Oct 12, 2021

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

4 Jul 2, 2022

Lightweight vuex inspired centralized state management library for all kinds of javascript applications. Great for React Native.

Verx Lightweight vuex inspired centralized state management library for all kinds of javascript applications. install npm install --save verx # yarn a

3 Nov 4, 2019

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

22 Jun 28, 2022

A library providing Vue applications with asynchronous-first state management

OverVue OverVue is a stream-based persistent state management library for Vue built on RxJS observables. While Vuex provides a robust option for handl

49 Apr 28, 2022

Comments

请教一下this.$modules有实际意义么

const app = new Vue({
    // ...
    modules,
    // ...
});
app.$mount('#app');

Vue.mixin({
    beforeCreate () {
        const options = this.$options;
        if (options.modules) {
            this.$modules = options.modules;
        } else if (options.parent && options.parent.$modules) {
            this.$modules = options.parent.$modules;
        }
    }
});

请教下这些代码似乎只是让没个vue实例都拥有一个modules的引用，就算没有这个库应该也能工作吧。那么为什么加在这呢有什么意义么？我知道我的理解对不对

opened by njleonzhang 2

modules have same prop in state will be override when mergeProps in components

I have a module and b module, both states have the same title prop:

//a module
export default {
    namespace: 'a',
    state: {
          title: 'a module'
    }
}

//b module
export default {
    namespace: 'b',
    state: {
          title: 'b module'
    }
}

when merging title prop to vue component:

// ...

export default {
       // ...
       computed: {
            ...mergeProps({
                  'titlea': 'a.title',
                  'titleb': 'b.title'
            })
       } 
      // ...
}

// ...

The titlea and titleb have the same value: a module or b module. What's expected is that titlea is a module and titleb is b module.

opened by dwqs 0

Releases(v0.7.6)

v0.7.6(Aug 27, 2017)
fix #2

Source code(tar.gz)
Source code(zip)
v0.7.5(Aug 23, 2017)
fix Object.values is not a function

add transform-runtime for the build to convert some es6 API.

Source code(tar.gz)
Source code(zip)

Owner

Pomy

:blush: :smiling_imp: :sunglasses: I hear and I forget. I see and I remember. I do and I understand. Follow heart, Try everything :running: :sunny: :dog:

GitHub