vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module
更新時(shí)間：2024年03月04日 14:18:59 作者：♂♀放紙鳶
這篇文章主要介紹了vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vite+vue3搭建的工程批量導(dǎo)入store的module
src\store文件夾下index.ts
import { createStore } from 'vuex'
const modulesFiles = import.meta.glob('./modules/*.ts', { eager: true })
const modules: any = {}
for (const path in modulesFiles) {
const moduleName = path.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
modules[moduleName] = (modulesFiles[path] as any).default
}
const store = createStore({
modules
})
export default store問(wèn)題的關(guān)鍵
是如何引入模塊內(nèi)的文件
const modules = import.meta.glob('./dir/*.js', { eager: true })一開(kāi)始沒(méi)加第二個(gè)參數(shù)，一直都是動(dòng)態(tài)加載，創(chuàng)建完了store模塊才被附上值，然后改為這樣的寫(xiě)法
const modulesFiles = import.meta.globEager('./modules/*.ts')但是globEager的寫(xiě)法已經(jīng)廢棄，強(qiáng)迫癥發(fā)作一定要改
如下圖：
但是可以點(diǎn)擊去查看
官網(wǎng)上也有解釋
匹配到的文件默認(rèn)是懶加載的，通過(guò)動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)，并會(huì)在構(gòu)建時(shí)分離為獨(dú)立的 chunk。
如果你傾向于直接引入所有的模塊（例如依賴(lài)于這些模塊中的副作用首先被應(yīng)用）
你可以傳入 { eager: true } 作為第二個(gè)參數(shù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+iview+less 實(shí)現(xiàn)換膚功能
這篇文章主要介紹了vue+iview+less 實(shí)現(xiàn)換膚功能,項(xiàng)目搭建用的vue—cli，css框架選擇的iview，具體操作流程大家跟隨腳本之家小編一起看看吧2018-08-08
使用arco-design-pro的vue3后臺(tái)框架, 切換路由時(shí), 組件包裹的keepAlive不生效, 切換tab后組件狀態(tài)會(huì)刷新, 并重新獲取接口, 導(dǎo)致頁(yè)面切換時(shí)閃爍,所以本文給大家介紹了Vue3使用KeepAlive不生效的解決方法,需要的朋友可以參考下2024-11-11
vue elementui 動(dòng)態(tài)追加下拉框、輸入框功能
這篇文章主要介紹了vue elementui 動(dòng)態(tài)追加下拉框、輸入框功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-04-04
這篇文章主要介紹了vue界面發(fā)送表情的實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
本文主要介紹了 Vue中使用PDF.js的實(shí)戰(zhàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
這篇文章主要介紹了vue3中如何獲取proxy包裹的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中使用js-doc的相關(guān)知識(shí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-01-01
基于Vue.js 實(shí)現(xiàn)簡(jiǎn)易拖拽指令
在 Vue.js 中,我們可以通過(guò)自定義指令的方式來(lái)實(shí)現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實(shí)現(xiàn)一個(gè)簡(jiǎn)易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04
Vue.js集成Word實(shí)現(xiàn)在線(xiàn)編輯功能
在現(xiàn)代Web應(yīng)用中,集成文檔編輯功能變得越來(lái)越常見(jiàn),特別是在協(xié)作環(huán)境中,能夠直接在Web應(yīng)用內(nèi)編輯Word文檔可以極大地提高工作效率,本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中集成Word在線(xiàn)編輯功能,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了關(guān)于vue-color-顏色選擇器插件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09