Как импортировать все модули 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.

Похожие статьи

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

Гик, хакинтошник, линуксоид, считаю что немного умею в вебдизайн и сайтостроение

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Leave a Comment

Adblock detector