Vue3 封裝擴展并簡化Vuex在組件中的呼叫-有解無憂

如果你在專案中使用了 vuex模塊化，并且在專案中使用actions中函式呼叫頻率高，推薦了解一下這種方式，

比如下面兩種方式呼叫，

第一個是直接傳參設定，

第二個是添加了異步ajax回傳內容在回呼到等下我們要封裝的js中的成功回呼里，然后這個成功回呼就會反饋給組件

1.創建檔案utils/vueTool.js

import storage from '@/utils/storage.js';
import store from '@/store/index.js';
const { dispatch, state } = store;
/**
 * @vuexFunc 呼叫vuex模塊中的 Actions 并異步回呼結果
 * @param modules {string} 呼叫指定的子模塊 如果是全域的可以不傳
 * @param funcName {string} 呼叫Actions 函式名稱
 * @param data  {object} 
 * @param followUp  {string / object} 
 *  {
     data:{},
     followUp:string / object
     function(res){}
    },
 * data:當前呼叫介面需要的引數，
 * followUp 當前介面完成回呼后 繼續執行更新介面的 名稱和引數 可以是請求地址字串 可以是物件攜帶引數
 * followUp:'URL' / followUp:{url:'請求介面地址',query:{引數}}
 * function回呼函式
 */
export function vuexFunc(modules = '', funcName = '', data =https://www.cnblogs.com/Allen-project/archive/2023/01/27/ {}) {
    function send(followUp = '', query = null, lock = null) {
        // 消費憑證
        if (typeof lock === 'number') {
            console.log('已消費:', lock)
            lock = true
        };
        let url = '';
        if (followUp) {
            url = followUp;
        } else {
            if (!modules && typeof modules !== 'boolean') {
                console.error('Actions函式名稱是必填，');
                return;
            };
            url = `${modules?modules+'/':''}${funcName}`;
        };
        
        // 開發中使用 校驗當前呼叫的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} 請檢查！`);
                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('開始后續回呼')
                        send(data.followUp, null, Date.now());
                    } else if (data.followUp && Object.keys(data.followUp).length) {
                        if (!data.followUp.url) {
                            console.error('缺少后續請求的url');
                            return;
                        };
                        if (!data.followUp.hasOwnProperty('query')) {
                            console.error('query欄位 缺少后續請求的引數，沒有引數直接傳入 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('介面請求失敗:'+url)
                    }
                };
            }
        });
    };
    send();
}

/**
 * @getState 獲取vuex中state倉庫
 * @param modules {string} 倉庫名稱 如果是子模塊就傳入子模塊的名稱
 */
export function getState(modules = '') {
    if (!modules) {
        console.error('state倉庫名稱是必填，');
        return;
    };
    return state[modules]
}

2.添加開發環境中的模塊驗證

注意：如果你的vue3專案是使用webpack5創建的那么這里的自動化匯入檔案就不能使用，可以去看看我上篇文章中有寫webpack5如何自動化匯入模塊

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.頁面呼叫封裝

actions函式的呼叫

import { vuexFunc, getState } from '@/utils/vueTool';

vuexFunc('子模塊檔案昵稱','actions.js中定義的函式昵稱',{
    data:{介面需要的引數，或者你要設定到倉庫的值},
    callback(res){ // 請求回呼
            console.log(res)
    }
});
//模式一(呼叫全域actions函式)
vuexFunc(false,'setStageCourse',{
    data:query,
    callback(res){
            console.log(res)
    }
});

//模式二(呼叫子模塊函式中的actions函式)
vuexFunc('index','setStageCourse',{
    data:query,
    callback(res){
            console.log(res)
    }
});

// 模式三(呼叫完一個actions函式后立即執行另外一個actions函式)
這里呼叫完成signIn子模塊中的loginByCode函式完成回呼后，會立即去讀取followUp的配置 
也是對應了 子模塊/signIn函式昵稱去執行，followUp允許一個具體的函式路徑或者一個物件可以配置函式要設定的值

vuexFunc('signIn','loginByCode',{
        data:{code:wxcode.value},
        followUp:'index/getConfig',
    callback(res){
        SignType.value = false
        storage.setItem('authorization',res.data.token);
        
    }
});

state倉庫的使用

import {vuexFunc,getState} from '@/utils/vueTool'

// 獲取全域state
let data = https://www.cnblogs.com/Allen-project/archive/2023/01/27/getState('全域state物件中定義的物件key')


// 獲取子模塊中的 state
// getState('子模塊昵稱') 獲取到某個子模塊中的state倉庫物件
let data = https://www.cnblogs.com/Allen-project/archive/2023/01/27/getState('signIn').SigninType

最后：

這樣既擴展了功能也不需要原本的vuex 先匯入在解構在呼叫，并且對actions的控制和錯誤也做到了顆粒化捕獲，與攔截反饋，在一定程度上提高了開發程序中的程式除錯，

后來我又思考了一下感徑訓能繼續優化，比如像vue2中使用 ...mapActions 和 ...mapState 直接回傳多個函式物件，感覺這樣會比較優雅，但是在專案中我已經開發過半了所以就沒有對這個進行重新改造，有興趣的可以試試，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542451.html

標籤：其他

上一篇：雙十一銷量實時統計圖表

下一篇：JS閉包和作用域（必學知識點總結）