Vue3?封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用問(wèn)題
如果你在項(xiàng)目中使用了 vuex模塊化,并且在項(xiàng)目中使用actions中函數(shù)調(diào)用頻率高,推薦了解一下這種方式。
比如下面兩種方式調(diào)用 ,
第一個(gè)是直接傳參設(shè)置,
第二個(gè)是添加了異步ajax返回內(nèi)容 在回調(diào)到等下我們要封裝的js中的成功回調(diào)里,然后這個(gè)成功回調(diào)就會(huì)反饋給組件
1.創(chuàng)建文件utils/vueTool.js
import storage from '@/utils/storage.js'; import store from '@/store/index.js'; const { dispatch, state } = store; /** * @vuexFunc 調(diào)用vuex模塊中的 Actions 并異步回調(diào)結(jié)果 * @param modules {string} 調(diào)用指定的子模塊 如果是全局的可以不傳 * @param funcName {string} 調(diào)用Actions 函數(shù)名稱 * @param data {object} * @param followUp {string / object} * { data:{}, followUp:string / object function(res){} }, * data:當(dāng)前調(diào)用接口需要的參數(shù), * followUp 當(dāng)前接口完成回調(diào)后 繼續(xù)執(zhí)行更新接口的 名稱和參數(shù) 可以是請(qǐng)求地址字符串 可以是對(duì)象攜帶參數(shù) * followUp:'URL' / followUp:{url:'請(qǐng)求接口地址',query:{參數(shù)}} * function回調(diào)函數(shù) */ export function vuexFunc(modules = '', funcName = '', data = {}) { function send(followUp = '', query = null, lock = null) { // 消費(fèi)憑證 if (typeof lock === 'number') { console.log('已消費(fèi):', lock) lock = true }; let url = ''; if (followUp) { url = followUp; } else { if (!modules && typeof modules !== 'boolean') { console.error('Actions函數(shù)名稱是必填。'); return; }; url = `${modules?modules+'/':''}${funcName}`; }; // 開發(fā)中使用 校驗(yàn)當(dāng)前調(diào)用的vuex模塊是否存在 if (process.env.NODE_ENV === 'development') { let modulesName = followUp ? followUp.split('/')[0] : typeof modules === 'boolean' ? funcName :modules; if (storage.getItem('modulesKey').indexOf(modulesName) === -1) { console.error(`找不到 ${modulesName} 請(qǐng)檢查!`); return; }; }; let queryData = {} if(typeof modules === 'boolean'){ queryData = data } else { queryData = followUp ? query ? query : {} :data.data && Object.keys(data.data).length?data.data:{} } dispatch(url, { // data: followUp ? query ? query : {} : data.data, data: queryData, callback(res) { // 成功 if (res !== 'failed') { if (lock) { console.log('停止了') return }; if (data.callback) { data.callback(res); }; if (data.followUp && typeof data.followUp === 'string') { console.log('開始后續(xù)回調(diào)') send(data.followUp, null, Date.now()); } else if (data.followUp && Object.keys(data.followUp).length) { if (!data.followUp.url) { console.error('缺少后續(xù)請(qǐng)求的url'); return; }; if (!data.followUp.hasOwnProperty('query')) { console.error('query字段 缺少后續(xù)請(qǐng)求的參數(shù),沒有參數(shù)直接傳入 string Url 形參'); return; }; send(data.followUp.url, data.followUp.query, Date.now()) }; // 失敗 -1 } else if (res === 'failed') { if (data.failed) { data.failed(res) } else { console.error('接口請(qǐng)求失敗:'+url) } }; } }); }; send(); } /** * @getState 獲取vuex中state倉(cāng)庫(kù) * @param modules {string} 倉(cāng)庫(kù)名稱 如果是子模塊就傳入子模塊的名稱 */ export function getState(modules = '') { if (!modules) { console.error('state倉(cāng)庫(kù)名稱是必填。'); return; }; return state[modules] }
2.添加開發(fā)環(huán)境中的模塊驗(yàn)證
注意:如果你的vue3項(xiàng)目是使用webpack5創(chuàng)建的 那么這里的自動(dòng)化導(dǎo)入文件 就不能使用,可以去看看我上篇文章中有寫webpack5如何自動(dòng)化導(dǎo)入模塊
import { createStore } from 'vuex' import actions from './actions' import mutations from './mutations' import storage from '@/utils/storage.js' const modulesFiles = import.meta.glob('./modules/*/index.js', { eager: true }); const modules = Object.keys(modulesFiles).reduce( (modules, path) => { const moduleName = path.replace(/^\.\/(.*)\.\w+$/, '$1') modules[moduleName.split('/')[1]] = modulesFiles[path]?.default return modules }, {} ); let modulesKey = ''; if(process.env.NODE_ENV === 'development'){ let obj = {...actions,...modules}; for(let key in obj){ modulesKey+=key+',' }; storage.setItem('modulesKey',modulesKey); }; const store = createStore({ modules, state: { name: 'allen', modulesKey:storage.getItem('modulesKey') || modulesKey, }, mutations, actions, getters: {} }) export default store
3.頁(yè)面調(diào)用封裝
actions函數(shù)的調(diào)用
import { vuexFunc, getState } from '@/utils/vueTool'; vuexFunc('子模塊文件昵稱','actions.js中定義的函數(shù)昵稱',{ data:{接口需要的參數(shù),或者你要設(shè)置到倉(cāng)庫(kù)的值}, callback(res){ // 請(qǐng)求回調(diào) console.log(res) } }); //模式一(調(diào)用全局actions函數(shù)) vuexFunc(false,'setStageCourse',{ data:query, callback(res){ console.log(res) } }); //模式二(調(diào)用子模塊函數(shù)中的actions函數(shù)) vuexFunc('index','setStageCourse',{ data:query, callback(res){ console.log(res) } }); // 模式三(調(diào)用完一個(gè)actions函數(shù)后立即執(zhí)行另外一個(gè)actions函數(shù)) 這里調(diào)用完成signIn子模塊中的loginByCode函數(shù)完成回調(diào)后,會(huì)立即去讀取followUp的配置 也是對(duì)應(yīng)了 子模塊/signIn函數(shù)昵稱去執(zhí)行,followUp允許一個(gè)具體的函數(shù)路徑或者一個(gè)對(duì)象可以配置函數(shù)要設(shè)置的值 vuexFunc('signIn','loginByCode',{ data:{code:wxcode.value}, followUp:'index/getConfig', callback(res){ SignType.value = false storage.setItem('authorization',res.data.token); } });
state倉(cāng)庫(kù)的使用
import {vuexFunc,getState} from '@/utils/vueTool' // 獲取全局state let data = getState('全局state對(duì)象中定義的對(duì)象key') // 獲取子模塊中的 state // getState('子模塊昵稱') 獲取到某個(gè)子模塊中的state倉(cāng)庫(kù)對(duì)象 let data = getState('signIn').SigninType
最后:
這樣既擴(kuò)展了功能 也不需要原本的vuex 先導(dǎo)入 在解構(gòu) 在調(diào)用,并且對(duì)actions的控制和錯(cuò)誤也做到了顆?;东@,與攔截反饋,在一定程度上提高了開發(fā)過(guò)程中的程序調(diào)試。
后來(lái)我又思考了一下感覺還能繼續(xù)優(yōu)化,比如像vue2中使用...mapActions 和...mapState 直接返回多個(gè)函數(shù)對(duì)象,感覺這樣會(huì)比較優(yōu)雅,但是在項(xiàng)目中我已經(jīng)開發(fā)過(guò)半了 所以就沒有對(duì)這個(gè)進(jìn)行重新改造,有興趣的可以試試。
到此這篇關(guān)于Vue3 封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用的文章就介紹到這了,更多相關(guān)Vue3 封裝擴(kuò)展內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue與vue-i18n結(jié)合實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換方法
下面小編就為大家分享一篇vue與vue-i18n結(jié)合實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue.js實(shí)現(xiàn)的購(gòu)物車功能詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)的購(gòu)物車功能,結(jié)合實(shí)例形式分析了vue.js購(gòu)物車的原理、數(shù)值計(jì)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01從Element日期組件源碼中學(xué)到的兩個(gè)工具方法技巧
這篇文章主要介紹了從Element日期組件源碼中學(xué)到的兩個(gè)工具方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08reactive readonly嵌套對(duì)象轉(zhuǎn)換功能實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了reactive readonly嵌套對(duì)象轉(zhuǎn)換功能實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12vue.extend與vue.component的區(qū)別和聯(lián)系
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯(lián)系,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問(wèn)題
這篇文章主要介紹了vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06