vue组件使用技巧（附带vuex的modules引入）

正常我们想要使用一个组件，需要经过三步：

//1.引入
import comonentName from './comonentName'
//2.注册
comonents:{
  comonentName,
}
//3.使用
<comonentName></comonentName>

这样做本身没有问题，但是组件多了的话就麻烦了，看了网上一些资料，说可以借助一下webpack，使用require.context()方法来创建自己的模块，从而实现自动动态require组件。

思路是：在src文件夹下面main.js中，借助webpack动态将需要的基础组件统统打包进来。

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
 
// Require in a base component context
const requireComponent = require.context(
 ‘./components', false, /base-[\w-]+\.vue$/
)
 
requireComponent.keys().forEach(fileName => {
 // Get component config
 const componentConfig = requireComponent(fileName)
 
 // Get PascalCase name of component
 const componentName = upperFirst(
  camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
 )
 
 // Register component globally
 Vue.component(componentName, componentConfig.default || componentConfig)
})

这样我们要使用组件就只需要第三步就可以了。

 

附带vuex的modules引入，留着下次验证使用

对于store文件的结构，通常是这样的：

// ...
- src
- components
- store
    -index.js
    -modules
        -user.js
        -posts.js
        -comments.js
- utils
// ...

index.js中的内容通常是这样的：

import user from './modules/user'
import posts from './modules/posts'
import comments from './modules/comments'
// ...
 
export default new Vuex.Store({
 modules: {
  auth,
  posts,
  comments,
  // ...
 }
})

分别引入modules中的子模块，然后再注册到Vuex.Store中

精简的做法和上面类似，也是运用require.context()读取文件，代码如下：

import camelCase from 'lodash/camelCase'
const requireModule = require.context('.', false, /\.js$/)
const modules = {}
requireModule.keys().forEach(fileName => {
 // Don't register this file as a Vuex module
 if (fileName === './index.js') return
 
 const moduleName = camelCase(
  fileName.replace(/(\.\/|\.js)/g, '')
 )
 modules[moduleName] = {
        namespaced: true,
        ...requireModule(fileName),
       }
})
export default modules

这样我们只需如下代码就可以了：

import modules from './modules'
export default new Vuex.Store({
 modules
})