Как импортировать все модули Vuejs сразу

Разработка /
Разработка: Как импортировать все модули Vuejs сразу

В этой статье я покажу рабочий вариант того, как мы можем добавить сразу несколько модулей Vuejs. Нам всем время от времени приходится импортировать модули, дабы не добавлять их по отдельности разберём как можно добавить их все разом.

Как это обычно выглядит store/index.js
import Vue from "vue";
    import Vuex from "vuex";

    import auth from "./modules/auth";
    import rows from "./modules/rows";
    import rooms from "./modules/rooms";
    import students from "./modules/students";

    Vue.use(Vuex);

    export default new Vuex.Store({
      modules: {
        auth,
        rows,
        rooms,
        students
      }
    });
Разработка: Как импортировать все модули Vuejs сразу

Как вы видите в приведенном выше примере, у нас есть 10 дополнительных строк в коде, 5 строк в которых мы импортируем модули и 5 в которых мы объявляем модули.

Давайте посмотрим, как мы можем это максимально сократить. Итак, для этого нам нужно создать файл index.js в папке modules, который опрашивает все файлы .js внутри папки modules/ и импортирует их по одному.

modules/index.js
import camelCase from "lodash/camelCase";
    const requireModule = require.context(".", false, /\.js$/); //extract js files inside modules folder
    const modules = {};

    requireModule.keys().forEach(fileName => {
      if (fileName === "./index.js") return; //reject the index.js file

      const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, "")); //

      modules[moduleName] = requireModule(fileName).default;
    });
    export default modules;
modules/auth.js
import auth from "../api/auth";

    const state = {
      isLoggedIn: !!localStorage.getItem("token"),
    };

    const getters = {
      isLoggedIn: state => {
        return state.isLoggedIn;
      }
    };

    const actions = {
      async loginUser({ commit }, data) {
        return await auth.login(data, data => {
          localStorage.setItem("token", data.access_token);
          commit("loginUser");
        });
      },
      async registerUser({ commit }, data) {
        await auth.register(data, data => {
          localStorage.setItem("token", data.access_token);
          commit("loginUser");
          return data;
        });
      },
      async logoutUser({ commit }) {
        return await auth.logout(data => {
          localStorage.removeItem("token");
          commit("logoutUser");
        });
      }
    };

    const mutations = {
      loginUser: state => {
        state.isLoggedIn = true;
      },
      logoutUser: state => {
        state.isLoggedIn = false;
      }
    };
    export default {
      state,
      actions,
      mutations,
      getters
    };
Теперь вернемся к назад к store/index.js и просто импортируем "./modules", что эквивалентно "./modules/index.js". Теперь store/index.js выглядит так:
import Vue from "vue";
    import Vuex from "vuex";

    import modules from "./modules";

    Vue.use(Vuex);

    export default new Vuex.Store({
      modules // Equivalent to => modules : modules(imported)
    });

Для большей информативности можете посмотреть эти файлы.

Перевод статьи Mohamed Benhida: TIP — Import Vuejs Modules at once.
Инженер по специальности радиотехника
Geek и пользователь
Manjaro Linux
и Hackintosh
Интересы: Компьютеры, интернет, музыка, спорт.
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.