时间戳

首页 > 解决方案 > 将商店导入 vuejs nuxt 项目

vue.js - 将商店导入 vuejs nuxt 项目

问题描述

我正在尝试为我的 Vue.js(Nuxt) 项目编写一个简单的插件。我在Vue 插件中看到了这篇文章，将突变添加到 Vuex 商店，但仍然无法使其正常工作。

这是我的应用程序结构。

~ 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.jsnuxt.js

解决方案

您没有传递任何属性，因此错误是正确的。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.

推荐阅读