vue-stash

A Vue.js plugin that makes it easy to share reactive data between components.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-stash
2.0.1-beta6 years ago6 years agoMinified + gzip package size for vue-stash in KB

Readme

vue-stash
A Vue.js plugin that makes it easy to share reactive data between components.

Installation

1.) Install package via NPM
$ npm install vue-stash
2.) Install plugin within project.
import Vue from 'vue';
import VueStash from 'vue-stash';

Vue.use(VueStash)

or
window.Vue = require('vue');
require('vue-stash');

Usage

1.) Initialize your store object.
Your store object is nothing more than a simple Javascript object set within your root vue model's $data option; Think of it as your "shared data option". Make sure you pre-initialize any properties that you want to be reactive, just like always.
new Vue({
    el: '#app',
    data: {
        store: {
            user: {
                name: 'cody'
            }
        }
    }
})

Alternatively, you can import your store from another file.
import store from './store';

new Vue({
    el: '#app',
    data: { store }
})

store.js
export default {
    user: {
        name: 'cody'
    }
}
2.) Add a "store" option to any child components that need to access data from the store.
Example 1: Simplest usage
Vue.component('user-card', {
    store: ['user'],
    ready() {
        console.log(this.user.name); // logs: 'cody'
        this.user.name = 'john doe'; // updates this.$root.store.user.name to 'john doe'.
        console.log(this.user.name); // logs: 'john doe'
    }
});

Example 2: Object store
Vue.component('user-card', {
    store: {
        user: 'user'
    },
    ready() {
        console.log(this.user.name); // logs: 'cody'
        this.user.name = 'john doe'; // updates this.$root.store.user.name to 'john doe'.
        console.log(this.user.name); // logs: 'john doe'
    }
});

Example 3: Access nested store property
Vue.component('user-card', {
    store: {
        name: 'user.name'
    },
    ready() {
        console.log(this.name); // logs: 'cody'
        this.name = 'john doe'; // updates this.$root.store.user.name to 'john doe'.
        console.log(this.name); // logs: 'john doe'
    }
});

Example 4: Dynamic store access
Vue.component('user-card', {
    store: {
        name() {
            return 'user.name';
        }
    },
    ready() {
        console.log(this.name); // logs: 'cody'
        this.name = 'john doe'; // updates this.$root.store.user.name to john doe.
        console.log(this.name); // logs: 'john doe'
    }
});

Note: The end result of examples 1-4 are equivalent.
3.) Access the store directly.
This plugin sets Vue.prototype.$store which allows any component to access the store via vm.$store.
Vue.component('user-card', {
    ready() {
        console.log(this.$store.user.name); // logs: 'cody';
        this.$store.user.name = 'john doe'; // updates this.$root.store.user.name to 'john doe';
        console.log(this.$store.user.name); // logs: 'john doe';
    }
});

Demo

If you'd like to demo vue-stash try vue-stack-2.0

License

MIT