3

我正在使用 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 一起使用！但是当我在组件中使用 store 对象时， store 对象是未定义的？

有人知道为什么吗？

4

1 回答 1

10

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

我写了一篇关于如何将 Vuex 商店作为应用程序插件公开的博客文章。

简而言之：

创建一个文件，将您的商店对象添加到主Vue原型。Vue 提供了一个install钩子，可以很容易地做到这一点：

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
于 2017-02-13T07:47:17.543 回答