将商店导入 vuejs nuxt 项目答案

【问题标题】：importing store to a vuejs nuxt project将商店导入 vuejs nuxt 项目
【发布时间】：2018-09-25 10:09:51
【问题描述】：

我正在尝试为我的 Vue.js(Nuxt) 项目编写一个简单的插件。我遇到了这个帖子Adding Mutations to Vuex store as part of Vue Plugin，但仍然无法正常工作。

这是我的应用程序结构。

~ is root

~/plugins/HTTP/index.js
~/plugins/HTTP/_store/ => index.js, actions.js, getters.js, mutations.js
~/plugins/HTTP/_api/ => index.js

**Global Store**
~/store/index.js
~/store/modules/
~/store/modules/testing => index.js, actions.js, getters.js, mutations.js

在我的~/plugins/HTTP/index.js 中，我有以下代码

import Vue from 'vue';
import store from '~/store';

const HTTP = {
    install(vue, { store }){ // Now you plugin depend on store
        if(!store){
            throw new Error('Please provide vuex plugin.')
        }
        // register your own vuex module
        store.registerModule({store})
    }
}

export default HTTP;

Vue.use(HTTP)

在我的~/store/index.js 我有以下代码：

import Vuex from 'vuex'
import testingModule from './modules/testing'

const state = () => {
  return new Vuex.Store({
    modules:{
      testing: testingModule
    }
  })
}

export default state

当我尝试运行它时，它给了我以下消息：

Cannot destructure property `store` of 'undefined' or 'null'.

我在这里做错了什么？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

您没有传递任何属性，因此错误是正确的。当你告诉use 时，你需要传入一个options 对象。它可以是空的，但它需要一个对象。

import Vue from 'vue';
import store from '~/store';

const HTTP = {
    install(vue, { store }){ // Now you plugin depend on store
        if(!store){
            throw new Error('Please provide vuex plugin.')
        }
        // register your own vuex module
        store.registerModule({store})
    }
}

export default HTTP;

Vue.use(HTTP, {}) // <---------- Empty object to avoid allow destructuring.

【讨论】：