Question

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

未捕获的ReferenceError：未定义主页

我的插件使组件具有全局性 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。如果您需要更多信息，请询问，但我很确定这就是所有问题。

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

我的全局组件不可用

1 个答案: