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
})