Global Vue Store

example.vue

<template>
    <div class="item">
        <container fluid>
            <row>
                <column size="1/4" tablet-size="1/3" mobile-size="fullwidth">
                    <item-card v-if="item"></item-card>
                    <back-button url="/inventory/items">
                        Back to Inventory
                    </back-button>
                </column>
                <column size="3/4" tablet-size="2/3" mobile-size="fullwidth">
                    Item Stuff
                </column>
            </row>
        </container>
    </div><!-- / .item -->
</template>

<script type="text/babel">
    export default {

        /**
         * The data accepted from the component's parent.
         *
         * @type {Array|Object}
         */
        props: {
            key: {
                required: true,
                type: String
            }
        },

        /**
         * The properties that should be accessed from the global store.
         *
         * @type {Array}
         */
        store: ['item'],

        /**
         * The 'ready' lifecycle hook.
         *
         * @return {void}
         */
        ready() {
            this.getItem();
        },

        /**
         * The component's methods.
         *
         * @type {Object}
         */
        methods: {

            /**
             * Make an api request to get the item with the given key.
             *
             * @promise
             * @return {void}
             */
            getItem() {
                this.$http.get('/api/items/' + this.key)
                        .then(response => this.item = response.data)
            }
        }
    }
</script>

main.js

require('./core/bootstrap'); // vue-bootstrap.js get included here
import store from './store';

var bus = new Vue({});

window.App = new Vue({
    el: '#app',

    data: { store },
});

store.js

export default {
    appraisalType: null,
    appraisalTypes: [],
    author: null,
    authors: [],
    book: null,
    books: [],
    buyer: null,
    buyers: [],
    buyList: null,
    buyLists: [],
    condition: null,
    conditions: [],
    currentUser: null,
    edition: null,
    editions: [],
    guide: null,
    guides: [],
    bid: null,
    bids: [],
    item: null,
    items: [],
    location: null,
    locations: [],
    problem: null,
    problems: [],
    publisher: null,
    publishers: [],
    purchase: null,
    purchases: [],
    receipt: null,
    receipts: [],
    receiptStatus: null,
    receiptStatuses: [],
    school: null,
    schools: [],
    sku: null,
    skus: [],
    supplement: null,
    supplements: [],
    supplier: null,
    suppliers: [],
    wholesaler: null,
    wholesalers: []
}

vue-bootstrap.js

// Bootstrap vue/vue-resource/etc...

// Define a helper property to grant us quick & easy access to the global store using the '$store' prototype property
Object.defineProperty(Vue.prototype, '$store', {
    get() { return this.$root.store; }
})

// A global helper function used to create computed properties to get/set global store properties.
// This could be extended to support nested objects.
// This doesn't have to be global.
window.StoreComputer = function (key) {
    return {
        get() { return this.$store[key]; },
        set(value) { this.$store[key] = value; }
    }
}

// Register a mixin that looks for a "store" option on all child components.
// Any properties found in the store option will be added to the components computed properties.
Vue.mixin({
    init() {
        // Make sure our store has been set on our root instance, we have a store option, a
        if (this.$store && this.$options.store && this != this.$root) {
            this.$options.store.forEach(computer => {
                if (typeof this.$options.computed == 'undefined') {
                    this.$options.computed = {};
                }

                this.$options.computed[computer] = new StoreComputer(computer);
            })
        }
    }
});