我的全局组件不可用

Question

我是 vuex 的新手，所以我可能只有一个非常愚蠢的错误。 我正在尝试制作一个反应式路由器，因为我使用了来自 vuex 的商店，并且由于我有多个组件，我使用了一个自写的插件来使它们全部全局化。我的问题是存储所有路线的商店，所有其他组件都无权访问我设置为全局的组件。我收到以下错误消息：

Uncaught ReferenceError: Home is not defined

我的插件使组件全球化 组件插件.js：

import List from "./components/List.vue";
import MainMenu from "./components/MainMenu.vue";
import Test from "./views/Test.vue";
import About from "./views/About.vue";
import Menu from "./views/Menu.vue";
import Home from "./views/Home.vue";

export default {
  install(Vue) {
    Vue.component("List", List);
    Vue.component("MainMenu", MainMenu);
    Vue.component("Test", Test);
    Vue.component("About", About);
    Vue.component("Menu", Menu);
    Vue.component("Home", Home);
  }
};

我的 store.js：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    projects: [{ id: 0, title: "Create new Project", compRate: 0 }],
    globalid: 1,
    projectname: "",
    routes: [
      {
        path: "/home",
        name: "home",
        component: Home
      },
      {
        path: "/about",
        name: "about",
        component: About
      },
      {
        path: "/menu",
        name: "menu",
        component: Menu
      }
    ],
    reloaded: 0
  },
  mutations: {
    newProject: (state, project) => {
      state.projects.push({
        id: project.id,
        title: project.title,
        compRate: project.compRate
      });
    },
    delProject: (state, id) => {
      state.projects.forEach(e => {
        if (id === e.id) {
          state.projects.splice(state.projects.indexOf(e), 1);
        }
      });
    },
    newName: (state, name) => {
      state.projectname = name;
    },
    newRoute: state => {
      state.reloaded++;
    }
  },
  actions: {
    newProject: ({ commit, state }, project) => {
      commit("newProject", {
        id: state.globalid,
        title: project.title,
        compRate: project.compRate
      });
      state.globalid++;
    },
    delProject: ({ commit }, id) => {
      commit("delProject", id);
    },
    newRoute: ({ commit }) => {
      commit("newRoute");
    }
  },
  getters: {
    getProjectNumber(state) {
      return state.projects.length;
    },
    getReloaded(state) {
      return state.reloaded;
    }
  }
});

我的 main.js：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import storePlugin from "./storePlugin";
Vue.use(storePlugin);

import componentPlugin from "./componentPlugin.js";
Vue.use(componentPlugin);

import "./registerServiceWorker.js";
import App from "./App.vue";
import router from "./router.js";
import store from "./store.js";

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);

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

storePlugin 只是为了让 store 全局化

商店插件：

import store from "./store";
export default {
  store,
  install(Vue) {
    Vue.prototype.$myStore = store;
  }
};

我正在使用 Vue v2.5.17 和 vue-router 2.0。 如果您需要更多信息，请询问，但我很确定这才是最重要的。

Answer 1

当你打电话时

import storePlugin from "./storePlugin";
Vue.use(storePlugin);

在 main.js 中，您的 Vue 实例不知道 componentPlugin 及其作用，因为它是在 storePlugin 之后调用的（在 storePlugin 中）你导入商店，所以我怀疑你得到 ReferenceError)

试试这个：

main.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import componentPlugin from "./componentPlugin.js";
Vue.use(componentPlugin);

import storePlugin from "./storePlugin";
Vue.use(storePlugin);

import "./registerServiceWorker.js";
import App from "./App.vue";
import router from "./router.js";
import store from "./store.js";

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);

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

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    projects: [{ id: 0, title: "Create new Project", compRate: 0 }],
    globalid: 1,
    projectname: "",
    routes: [
      {
        path: "/home",
        name: "home",
        component: Vue.component('Home')
      },
      {
        path: "/about",
        name: "about",
        component: Vue.component('About')
      },
      {
        path: "/menu",
        name: "menu",
        component: Vue.component('Menu')
      }
    ],
    reloaded: 0
  },
  mutations: {
    newProject: (state, project) => {
      state.projects.push({
        id: project.id,
        title: project.title,
        compRate: project.compRate
      });
    },
    delProject: (state, id) => {
      state.projects.forEach(e => {
        if (id === e.id) {
          state.projects.splice(state.projects.indexOf(e), 1);
        }
      });
    },
    newName: (state, name) => {
      state.projectname = name;
    },
    newRoute: state => {
      state.reloaded++;
    }
  },
  actions: {
    newProject: ({ commit, state }, project) => {
      commit("newProject", {
        id: state.globalid,
        title: project.title,
        compRate: project.compRate
      });
      state.globalid++;
    },
    delProject: ({ commit }, id) => {
      commit("delProject", id);
    },
    newRoute: ({ commit }) => {
      commit("newRoute");
    }
  },
  getters: {
    getProjectNumber(state) {
      return state.projects.length;
    },
    getReloaded(state) {
      return state.reloaded;
    }
  }
});

如果你想在vuex中使用路由器我推荐vuex-router-sync