前后端数据同步

#tech / dev / frontend #type / howto #status / growing

[!info] related notes

相关概念: 前后端的DTO数据同步, 前后端实时通信

相关实践: contracts-in-dailyuse, nodejs后端api测试搭建集成测试框架

相关主题: 后端测试

1. 直接更新本地数据

直接在修改服务器中数据后也同步修改本地数据，避免了请求，减少了服务器的压力

// 在 handleRemoveSavedAccount 方法中
const handleRemoveSavedAccount = async (username: string) => {
    try {
        const response = await sharedDataService.removeSavedAccountInfo(username);
        if (response.success) {
            // 直接更新本地状态，无需重新请求
            authStore.setSavedAccounts(
                authStore.savedAccounts.filter(acc => acc.username !== username)
            );
            snackbar.message = "账号记录已删除";
            snackbar.color = "success";
        } else {
            snackbar.message = response.message || "删除失败";
            snackbar.color = "error";
        }
        snackbar.show = true;
    } catch (error) {
        console.error("删除账号记录失败:", error);
        snackbar.message = error instanceof Error ? error.message : "删除失败";
        snackbar.color = "error";
        snackbar.show = true;
    }
};

2. 重新获取数据

对服务器压力增大，数据大时，请求时间长，也影响用户体验
强一致性

const handleRemoveSavedAccount = async (username: string) => {
    try {
        const response = await sharedDataService.removeSavedAccountInfo(username);
        if (response.success) {
            // 重新获取所有数据
            const newResponse = await sharedDataService.getAllSavedAccountInfo();
            if (newResponse.success && Array.isArray(newResponse.data)) {
                authStore.setSavedAccounts(newResponse.data);
            }
            snackbar.message = "账号记录已删除";
            snackbar.color = "success";
        } else {
            // ...error handling
        }
    } catch (error) {
        // ...error handling
    }
};

3. 使用响应式状态管理

相当于方法1 直接更新本地数据
修改被多个组件依赖的数据时，可以响应式更新所有前端页面

// stores/authStore.ts
export const useAuthStore = defineStore('auth', {
    state: () => ({
        savedAccounts: [] as SavedAccount[],
        // ...other state
    }),
    actions: {
        setSavedAccounts(accounts: SavedAccount[]) {
            this.savedAccounts = accounts;
        },
        removeSavedAccount(username: string) {
            this.savedAccounts = this.savedAccounts.filter(
                acc => acc.username !== username
            );
        },
        async deleteAccount(username: string) {
            const response = await sharedDataService.removeSavedAccountInfo(username);
            if (response.success) {
                this.removeSavedAccount(username);
                return true;
            }
            return false;
        }
    }
});

4. 使用发布订阅模式

解耦了前端数据更新与后端数据更新
很好的跨组件实现

// eventBus.ts
import mitt from 'mitt';

type Events = {
    'account:removed': string;
    'accounts:updated': SavedAccount[];
};

export const eventBus = mitt<Events>();

// 在组件中使用
onMounted(() => {
    eventBus.on('account:removed', updateAccounts);
});

onUnmounted(() => {
    eventBus.off('account:removed', updateAccounts);
});