Vue中如何抽取部分代碼到單獨(dú)的ts文件

本文代碼基于

簡單示例

這段代碼，是比較通用的代碼，我想抽取成一個(gè)ts文件，來供其他地方調(diào)用。

const groupData = reactive({groupList:[] as Array<GroupV2Response>,current:{} as GroupV2Response,
})const groupFunc = new class {groupType = 1;loadGroupChildrenList = (parentGroupCode:string|null) => {axios.post("/gallery/group/query-group-children",{groupCode:parentGroupCode,type:this.groupType,}).then(resp => groupData.groupList = resp.data.data)}selectThisGroup = (group:GroupV2Response) => {groupData.current = group;this.loadGroupChildrenList(group.groupCode);}clearCurrentGroup = () => {groupData.current = {} as GroupV2Response;}
}

為了將這段代碼抽取成一個(gè) TypeScript 文件供其他地方調(diào)用，并且能夠操作 Vue 的響應(yīng)式變量，可以考慮以下幾個(gè)步驟：

1. 創(chuàng)建一個(gè) TypeScript 文件：這個(gè)文件將包含類和響應(yīng)式數(shù)據(jù)結(jié)構(gòu)。
2. 抽象出響應(yīng)式狀態(tài)：可以將響應(yīng)式狀態(tài) (reactive 對象) 作為參數(shù)傳遞給類，使得這個(gè)類更加靈活和可重用。
3. 導(dǎo)出類和響應(yīng)式狀態(tài)：從這個(gè)文件中導(dǎo)出你創(chuàng)建的類和函數(shù)，這樣其他組件或文件就可以引用和實(shí)例化它。

步驟 1: 創(chuàng)建 TypeScript 文件

首先，創(chuàng)建一個(gè)新的 TypeScript 文件，例如命名為 GroupManager.ts。

步驟 2: 抽象出響應(yīng)式狀態(tài)

你可以修改類，讓它接收一個(gè)響應(yīng)式狀態(tài)對象作為參數(shù)。這樣，類就不依賴于外部的具體響應(yīng)式變量了。

// GroupManager.ts
import { reactive } from 'vue';
import axios from 'axios';
import { GroupV2Response } from './path-to-type-definitions'; // 確保引入了正確的類型定義// 定義響應(yīng)式狀態(tài)接口
interface GroupData {groupList: Array<GroupV2Response>;current: GroupV2Response;
}export class GroupManager {private groupData: GroupData;groupType = 1;constructor(groupData: GroupData) {this.groupData = groupData;}loadGroupChildrenList = (parentGroupCode: string|null) => {axios.post("/gallery/group/query-group-children", {groupCode: parentGroupCode,type: this.groupType,}).then(resp => this.groupData.groupList = resp.data.data);}selectThisGroup = (group: GroupV2Response) => {this.groupData.current = group;this.loadGroupChildrenList(group.groupCode);}clearCurrentGroup = () => {this.groupData.current = {} as GroupV2Response;}
}// 可以提供一個(gè)工廠函數(shù)來創(chuàng)建和初始化響應(yīng)式數(shù)據(jù)
export function createGroupManager() {const groupData: GroupData = reactive({groupList: [],current: {} as GroupV2Response,});return { groupData, groupManager }; 
}

步驟 3: 使用抽取的文件

在其他 Vue 組件中，你可以導(dǎo)入并使用這個(gè)抽象化了的類：

// SomeComponent.vue
<script setup lang="ts">
import { createGroupManager } from './GroupManager';const { groupData, groupManager } = createGroupManager();
</script>

這樣，你就能夠在不同的組件中復(fù)用 GroupManager 類，并且每個(gè)組件可以有自己的響應(yīng)式狀態(tài)實(shí)例，這使得組件更獨(dú)立、更易于管理。

相應(yīng)外部事件

要使得 GroupManager 類在執(zhí)行特定方法（如 selectThisGroup）時(shí)能夠與其他代碼或組件進(jìn)行交互，例如觸發(fā)事件，你可以采用幾種設(shè)計(jì)策略。這些策略通常涉及使用事件發(fā)射（emitting events）、回調(diào)函數(shù)或利用 Vue 的全局事件總線。下面，我將提供幾種方法來實(shí)現(xiàn)這種交互。

方法 1: 使用事件發(fā)射（EventEmitter）

你可以使用一個(gè)事件發(fā)射器（EventEmitter）來在你的類中觸發(fā)事件。這可以通過使用 Node.js 的 events 模塊或一個(gè)簡單的第三方事件庫來實(shí)現(xiàn)。

安裝事件庫（例如 mitt，一個(gè)輕量級的事件庫）：

npm install mitt

修改 GroupManager 類：

// GroupManager.ts
import { reactive } from 'vue';
import axios from 'axios';
import mitt from 'mitt';
import { GroupV2Response } from './path-to-type-definitions';interface GroupData {groupList: Array<GroupV2Response>;current: GroupV2Response;
}export class GroupManager {public groupData: GroupData;groupType = 1;emitter = mitt();  // 創(chuàng)建事件發(fā)射器constructor(groupData: GroupData) {this.groupData = groupData;}loadGroupChildrenList = (parentGroupCode: string|null) => {axios.post("/gallery/group/query-group-children", {groupCode: parentGroupCode,type: this.groupType,}).then(resp => this.groupData.groupList = resp.data.data);}selectThisGroup = (group: GroupV2Response) => {this.groupData.current = group;this.loadGroupChildrenList(group.groupCode);this.emitter.emit('group-selected', group);  // 觸發(fā)事件}clearCurrentGroup = () => {this.groupData.current = {} as GroupV2Response;this.emitter.emit('group-cleared');  // 觸發(fā)事件}on(eventName: string, handler: (event?: any) => void) {this.emitter.on(eventName, handler);  // 提供方法來監(jiān)聽事件}off(eventName: string, handler: (event?: any) => void) {this.emitter.off(eventName, handler);  // 提供方法來移除監(jiān)聽}
}

使用 GroupManager 類：

<script setup lang="ts">
import { createGroupManager } from './GroupManager';const { groupData, groupManager } = createGroupManager();groupManager.on('group-selected', (group) => {console.log('Selected group:', group);
});groupManager.on('group-cleared', () => {console.log('Group cleared');
});onUnmounted(() => {// 確保在組件卸載時(shí)移除事件監(jiān)聽器，避免內(nèi)存泄漏groupManager.off('group-selected', handler);groupManager.off('group-cleared', handler);
});
</script>

方法 2: 使用回調(diào)函數(shù)

另一種方法是在 GroupManager 類的構(gòu)造函數(shù)中接受一個(gè)或多個(gè)回調(diào)函數(shù)作為參數(shù)，當(dāng)發(fā)生特定的動作時(shí)調(diào)用這些函數(shù)。

// GroupManager.ts
export class GroupManager {public groupData: GroupData;groupType = 1;private onSelectGroup: (group: GroupV2Response) => void;private onClearGroup: () => void;constructor(groupData: GroupData, onSelectGroup: (group: GroupV2Response) => void, onClearGroup: () => void) {this.groupData = groupData;this.onSelectGroup = onSelectGroup;this.onClearGroup = onClearGroup;}selectThisGroup = (group: GroupV2Response) => {this.groupData.current = group;this.loadGroupChildrenList(group.groupCode);this.onSelectGroup(group);}clearCurrentGroup = () => {this.groupData.current = {} as GroupV2Response;this.onClearGroup();}
}

在這種設(shè)計(jì)中，你可以在創(chuàng)建 GroupManager 實(shí)例時(shí)提供具體的回調(diào)函數(shù)，使得類的行為更加靈活。這種方式適合于較為簡單的交互場景，且當(dāng)交互邏輯較為固定時(shí)。

通過上述兩種方法，你可以使 GroupManager 類在執(zhí)行其內(nèi)部方法時(shí)與外部代碼有效交互，根據(jù)具體的應(yīng)用場景選擇適合的設(shè)計(jì)模式。