前端工程化之vuex自动引入module

---

前言

提示：vue之vuex自动引入module：
例如：节省时间成本

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端工程化是什么?

一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。

二、使用工程化之前

1.引入module

代码如下（示例）：

import Vue from 'vue'
import Vuex, { createLogger } from 'vuex'
// 引入计算属性
import getters from './getters'

// 引入modules
import center from './modules/center'
import home from './modules/home'
import user from './modules/user'

Vue.use(Vuex)

const debug =  process.env.NODE_ENV === 'development' // 开发环境

export default new Vuex.Store({
  getters, // 计算属性
  modules:{
    center,
    home,
    user
  }, // 模块化
  strict: debug, // true 严格使用 mutations 改变 state
  plugins:debug ? [createLogger()] : [] // 开发模式使用日志 非开发不使用
})

缺点：每当多出来一个module 要重新引入，假设有100个 module 要手动引入100 次，很不合理 。解决方案利用 webpack 自动帮我们引入 module

2.webpack 之 require.context

代码如下（示例）：

import Vue from 'vue'
import Vuex, { createLogger } from 'vuex'
// 引入计算属性
import getters from './getters'

Vue.use(Vuex)

// 引入 modules 文件夹下的文件
const modulesFiles = require.context('./modules', true, /\.js$/)

// 自动化处理文件
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // 处理名称
  const moduleName = modulePath.replace(/^\.\/(.*)\.js$/, '$1')
  // 取值
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const debug =  process.env.NODE_ENV === 'development' // 开发环境

export default new Vuex.Store({
  getters, // 计算属性
  modules, // 模块化
  strict: debug, // true 严格使用 mutations 改变 state
  plugins:debug ? [createLogger()] : [] // 开发模式使用日志 非开发不使用
})

让代码为我们工作，提升时间效率。

---

总结

利用好自动化，可以提高项目的效率，减少重复性高的工作

欢迎点赞、评论、收藏，谢谢 ( ｡ớ ₃ờ)ھ