其他分享
首页 > 其他分享> > vue组件使用技巧(附带vuex的modules引入)

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

 

标签:vue,const,camelCase,modules,fileName,import,js,vuex
来源: https://www.cnblogs.com/chao202426/p/11481257.html