javascript - 当组件有自己的 vuex 存储设置时，无法将组件用作插件

Question

我有一个组件，它更像是一个拥有自己的 vuex 商店的应用程序。我需要把它包装成一个插件，然后在另一个会有主商店的应用程序中使用。我试过这样做，但没有成功。以下是我做的事情...

为了包装它，我定义了一个名为 bundle.js 的文件，其中我设置了以下代码。我将使用这个文件作为构建目标。

import Scheduler from './App.vue';
import store from './storeBuild';

export default {
    install(Vue, options) {
        if (!options || !options.store) {
            throw new Error('Please initialise plugin with a Vuex store.')
        }

        options.store.registerModule('schedulerLib', store)

        Vue.component('scheduler', Scheduler)
    }
}

这是我有构建脚本的 package.json

{
  "name": "scheduler",
  "version": "0.1.0",
  "private": true,
  "main": "dist/scheduler.common.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --inline-vue --name scheduler ./src/bundle.js" // The script to build the bundle
  },
"dependencies": {
  ..........
 }
}

我的商店文件将直接导出对象而不是创建商店

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default {
    namespace: true,
    state: {
     layout: 'main-layout',
     nestedObject: {},
    },
    mutations: {
     // Has more than 20 handlers
    },
    actions: {

    },
    modules: {
    }
}

运行 build-bundle 后，我将代码连同我的 dist 文件夹推送到 git 中。然后我使用 gitlab 链接将它作为一个包添加到我的其他应用程序中（即） yarn add git+https://abc:[e-mail]/abc/task-scheduler.git#master // 这里的任务调度程序是回购名称

我能够解决早期的障碍，现在我能够看到图书馆的商店设置，但我仍然无法在我的布局中看到图书馆的 UI。请注意，我在插件本身内部的布局取决于状态变量之一，因此插件存储未正确集成，然后布局不会显示。

下面是插件的App.vue文件

<template>
  <div id="scheduler">
    <component v-bind:is="layout"></component>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MainnLayout from "./components/layouts/MainnLayout";
import WbsLayout from "./components/layouts/WbsLayout";
import "@/components/global";

export default {
  name: "scheduler",
  computed: {
    ...mapState(["scheduleLayout"]),
    layout() {
      return this.scheduleLayout;
    },
  },
  components: {
    "mainn-layout": MainnLayout,
    "wbs-layout": WbsLayout,
  },
};
</script>

<style lang="scss">
#scheduler {
  font-family: Lato, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 940px;
}
</style>

我添加了下面的截图以供参考

正如@Dan 所建议的那样，我更新了插件组件中的更改，并且能够在父应用程序中调出模块，并且我在父应用程序中的 vuex 现在显示了该模块，但我的控制台上仍然有错误

标签： javascriptvue.jsvuejs2vue-componentvuex