12、MobX 特殊场景的特殊 API 及实用工具介绍

MobX 特殊场景的特殊 API 及实用工具介绍

1. 拦截与观察变化

1.1 intercept() 示例应用

在处理主题变更时，我们可以使用 intercept() 函数来对变更进行预处理。例如，在处理主题值时，我们需要确保值的合法性：

// 处理主题变更的拦截函数
const interceptThemeChange = intercept(theme, 'color', change => {
    if (change.newValue === null) {
        return null;
    }
    // 处理简写值
    const newTheme = change.newValue.toLowerCase();
    if (newTheme === 'l' || newTheme === 'd') {
        change.newValue = newTheme === 'l' ? 'light' : 'dark'; 
        return change;
    }
    // 检查是否为有效主题
    const allowedThemes = ['light', 'dark'];
    const isAllowed = allowedThemes.includes(newTheme);
    if (!isAllowed) {
        throw new Error(`${change.newValue} is not a valid theme`);
    }
    return