我正在开发一个可重用的组件,并发布在我的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>
最后,控制台中出现以下错误:
有什么建议吗?