我的全局组件不可用-Java 学习之路

我是vuex的新手所以我可能只有一个非常愚蠢的错误 . 我正在尝试制作一个反应式路由器，因为我使用了来自vuex的商店，因为我有多个组件，我使用自写插件使它们全局全局 . 我的问题是保存所有路由的商店，以及所有其他组件都无法访问我设置为全局的组件 . 我得到以下Errormessage：

未捕获的ReferenceError：未定义Home

我的插件使组件全局componentPlugin.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只是为了让商店全球化

storePlugin：

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

我正在使用Vue v2.5.17和vue-router 2.0 . 如果您需要更多信息，请询问，但我非常确定这一切都很重要 .

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

回复于 2024-05-15T21:17:29+08:00

我的全局组件不可用

1 回答

相关问题