Question

我正在尝试为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'.

我在这里做错了什么？

Answer 1

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

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.

将商店导入到vuejs nuxt项目

1 个答案: