vue.js - 如何设置全局存储对象？

Question

我正在使用 vueify 和 browserify。我在我的 main.js 文件中创建了一个对象

var store = {
foo: 'bar'
};

var vm = new Vue({
el: '#app',
data(){
    return {
        foo: store
    };
},

components: {
    Login,
    Registration,
    ClassifiedList,
    BusinessRegistration,
    BusinessUpdate,
    UserRegistration,
    ClassifiedForm,

    //  ClassifiedKfzCreateForm,
    // ClassifiedImmobilienCreateForm,
    // ClassifiedImmobilienEditForm,
    // ClassifiedKleinanzeigenCreateForm,
    // ClassifiedJobsCreateForm
}

});

现在在我的 Vue 实例中，我可以将它与 foo.store.foo 一起使用!但是当我在组件中使用存储对象时，存储对象是未定义的？

有人知道为什么吗？

Answer 1

让您的商店在全局范围内可用的最佳方式可能是将其作为插件公开。

我写了一篇关于 how to expose a Vuex store as a plugin for your app 的博文.

简而言之:

创建一个文件，将您的商店对象添加到主 Vue 原型(prototype)中。 Vue 提供了一个 install Hook 来简化此操作:

storePlugin.js:

import store from '.'  // this is your store object
export default {  
  store,
  // we can add objects to the Vue prototype in the install() hook:
  install (Vue, options) {
    Vue.prototype.$myStore = store
  }
}

然后在 main.js 中，您告诉它使用您的插件:

import storePlugin from './storePlugin'  
Vue.use(storePlugin)  

然后，例如，您可以通过以下方式从组件访问您的商店:

this.$myStore