使用vuex访问我的npm软件包时,存储区未定义

时间:2020-09-07 04:09:25

标签: plugins vue-component vuex nuxt.js rollup

我正在开发一个可重用的组件,并发布在我的Nexus存储库中。我的组件依赖vuex存储,定义如下:

export default new Vuex.Store({
    modules: {
        myModuleStore
    }
});

也是myModuleStore文件:

const getters = {};
const actions = {};
const mutations = {};
const state= {};
export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
};

另外,我的vue.js项目的main.js如下:

import store from './store/store';

import './config/fontawesome';
import "vue-slider-component/theme/default.css";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store,
}).$mount('#app');

如果它也存在,我们将其注册到vue实例中,我们从以下链接(enter link description here和(enter link description here)获得帮助:

//entry.js

import component from "./App.vue";
import myModuleStore "./store/myModuleStore";

function install(Vue, options) {
  if (!options.store) throw new Error("Please provide vuex store.");
  if (install.installed) return;

  install.installed = true;
  Vue.component("myPackageName", component);
  options.store.registerModule("myModuleStore", myModuleStore);
}
const plugin = {
  install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

component.install = install;

export default component;

然后根据此链接enter link description here的描述使用汇总来捆绑组件。我在nuxt项目中将我的软件包用作插件,并带有以下内容:

//plugins/myPlugin.js
import Vue from "vue";
import myPackage from "myPackage";
export default ({ store }) => {
    Vue.use(myPackage, { store });
};

它也尝试不通过存储。然后在页面中使用,如下所示:

   //index.vue
<template>
  <my-package/>
</template>
<script>
export default {};
</script>

最后,控制台中出现以下错误:

enter image description here

有什么建议吗?

0 个答案:

没有答案