dwqs / revuejs

: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 --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