vuex 如何動(dòng)態(tài)引入 store modules
更新時(shí)間：2022年03月30日 16:55:12 作者：qq_489366879
這篇文章主要介紹了vuex 如何動(dòng)態(tài)引入 store modules，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
動(dòng)態(tài)引入store modules
主要解決的問(wèn)題每次建一個(gè)module需要自己去主index.js里面去注冊(cè)
為了偷懶，也為了避免團(tuán)隊(duì)開(kāi)發(fā)時(shí)同時(shí)對(duì)index.js 進(jìn)行修改引發(fā)沖突
所以在index.js中 動(dòng)態(tài)的對(duì)子目錄和模塊進(jìn)行注冊(cè)
我的目錄結(jié)構(gòu)是
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const dynamicModules = {}
const files = require.context('.', true, /\.js$/)
const dynamicImportModules = (modules, file, splits, index = 0) => {
if (index == 0 && splits[0] == 'modules') {
++index
}
if (splits.length == index + 1) {
if ('index' == splits[index]) {
modules[splits[index - 1]] = files(file).default
} else {
modules.modules[splits[index]] = files(file).default
}
} else {
let tmpModules = {}
if ('index' == splits[index + 1]) {
tmpModules = modules
} else {
modules[splits[index]] = modules[splits[index]] ? modules[splits[index]] : {namespaced: true, modules: {}}
tmpModules = modules[splits[index]]
}
dynamicImportModules(tmpModules, file, splits, ++index)
}
}
files.keys().filter(file => file != './index.js').forEach(file => {
let splits = file.replace(/(\.\/|\.js)/g, '').split('\/');
dynamicImportModules(dynamicModules, file, splits)
})
export default new Vuex.Store({
modules: dynamicModules,
strict: process.env.NODE_ENV !== 'production'
})使用modules時(shí)遇到的坑
其實(shí)也不算坑，只是自己沒(méi)注意看官網(wǎng)api，定義module另外命名時(shí)，需要在module中加一個(gè)命名空間namespaced: true
屬性，否則命名無(wú)法暴露出來(lái)，導(dǎo)致報(bào)[vuex] module namespace not found in mapState()等錯(cuò)誤。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()
今天小編就為大家分享一篇vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue父組件異步如何獲取數(shù)據(jù)傳給子組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁(yè)面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧2022-04-04
Vue3+Vite+TS實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga
這篇文章主要介紹了在Vue3+Vite+TS的基礎(chǔ)上實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga，下面文章也將圍繞實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga的相關(guān)介紹展開(kāi)相關(guān)內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可惡意參考一下2021-12-12
vue.extend與vue.component的區(qū)別和聯(lián)系
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯(lián)系，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
基于vue開(kāi)發(fā)的在線付費(fèi)課程應(yīng)用過(guò)程
這篇文章主要介紹了基于vue開(kāi)發(fā)的在線付費(fèi)課程應(yīng)用過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
Vue學(xué)習(xí)筆記之計(jì)算屬性與偵聽(tīng)器用法
這篇文章主要介紹了Vue學(xué)習(xí)筆記之計(jì)算屬性與偵聽(tīng)器用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js計(jì)算屬性與偵聽(tīng)器基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Element Cascader 級(jí)聯(lián)選擇器的使用示例
這篇文章主要介紹了Element Cascader 級(jí)聯(lián)選擇器的使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)骨架屏的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04