vue-common-store

A Vue.js plugin that makes it easy to share reactive data between components, with useful functionality.

This plugin can work alongside the official VueJS state management plugin, Vuex. There are some times when you need to share state with lean code that has no restrictions.

Installation

1.) Install package:

via Yarn

$ yarn add vue-common-store

via NPM

$ npm install vue-common-store

2.) Install plugin within project.

1import Vue from 'vue';
2import VueStash from 'vue-common-store';
3
4Vue.use(VueStash)

if you use Quasar, or something similar, do this in boot file. NB: this skips next step (Initialize your store object), as you are doing it here.

1export default function ({ app, Vue }) {
2 app.data = {
3  cstore: {
4      user: {
5          name: 'cody'
6      }
7  }
8 }
9};

or

1window.Vue = require('vue');
2require('vue-common-store');

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.

1new Vue({
2    el: '#app',
3    data: {
4        cstore: {
5            user: {
6                name: 'cody'
7            }
8        }
9    }
10})

Alternatively, you can import your store from another file.

1import cstore from './store';
2
3new Vue({
4    el: '#app',
5    data: { cstore }
6})

store.js

1export default {
2    user: {
3        name: 'cody'
4    }
5}

2.) Add a "store" option to any child components that need to access data from the store.

Example 1: Simplest usage

1Vue.component('user-card', {
2    cstore: ['user'],
3    // Use `ready` for Vue 1.x
4    mounted() {
5        console.log(this.user.name); // 'cody'
6        this.user.name = 'john doe';
7        console.log(this.user.name); // 'john doe'
8    }
9});

Example 2: Object store

1Vue.component('user-card', {
2    cstore: {
3        user: 'user'
4    },
5    // Use `ready` for Vue 1.x
6    mounted() {
7        console.log(this.user.name); // 'cody'
8        this.user.name = 'john doe';
9        console.log(this.user.name); // 'john doe'
10    }
11});

Example 3: Access nested store property

1Vue.component('user-card', {
2    cstore: {
3        name: 'user.name'
4    },
5    // Use `ready` for Vue 1.x
6    mounted() {
7        console.log(this.name); // 'cody'
8        this.name = 'john doe';
9        console.log(this.name); // 'john doe'
10    }
11});

Example 4: Dynamic store access

1Vue.component('user-card', {
2    cstore: {
3        name(store, vm) {
4            // passed in the root.cstore and 'user-card' vm for easier ref. 'this' refers to the vm.cstore (NB: function is not a lambda)
5            // return the data that is dynamically calculated
6            return store.user.name;
7        },
8    
9        hasName(store, vm) {
10            return !!store.user.name;
11        }
12    },
13    // Use `ready` for Vue 1.x
14    mounted() {
15        console.log(this.name); // 'cody'
16        console.log(this.hasName); // true
17        // this.name = 'john doe'; // can't be done, yet
18        // console.log(this.name); // 'john doe'
19    }
20});

Note: The end result of examples 1-4 are equivalent.

3.) Access the store directly.

This plugin sets Vue.prototype.$cstore which allows any component to access the store via vm.$cstore.

1Vue.component('user-card', {
2    // Use `ready` for Vue 1.x
3    mounted() {
4        console.log(this.$cstore.user.name); // 'cody';
5        // this.$cstore.user.name = 'john doe'; // not working yet WIP
6        // console.log(this.$cstore.user.name); // 'john doe';
7    }
8});

Author

Emmanuel Mahuni - vue-common-store

Attribution

Cody Mercer - vue-stash Sean Ferguson - vue-stash-nested

License

MIT