Alpine.js getter方法未等待异步请求完成致INPUT值为NaN

问题原因 #

输入框显示NaN是因为Alpine Store的ri_total getter在异步请求获取汇率数据前就执行了：初始时xe是数值0，访问xe.usd2inr会得到undefined，计算250 * undefined结果为NaN，最终格式化后还是NaN。

解决方案 #

方案1：给初始值设置默认汇率并手动触发刷新 #

给xe设置包含usd2inr属性的初始对象，避免访问undefined，同时在获取到汇率后手动通知Alpine刷新Store：

// 初始设置默认汇率，比如0或者当前合理的参考值
let xe = { usd2inr: 0 };

const get_usd2inr = async () => {
    return await fetch(BASE_URL + "api/usd")
    .then(response => response.json());
}

document.addEventListener("DOMContentLoaded", async () => {
    xe = await get_usd2inr();
    // 手动触发Store刷新，让getter重新计算值
    Alpine.store('local_data').$refresh();
});

Alpine.store('local_data', {
    get ri_total() {
        let usd2inr = xe.usd2inr;
        let total = parseFloat(250 * usd2inr).toFixed(2);        
        const formatedNumber = new Intl.NumberFormat('en-IN', { currency: 'INR' }).format(total);
        return formatedNumber;
    }
});

方案2：将汇率状态移入Alpine Store（推荐） #

把汇率数据放到Store内部，利用Alpine的响应式特性自动更新，无需手动刷新：

const get_usd2inr = async () => {
    return await fetch(BASE_URL + "api/usd")
    .then(response => response.json());
}

document.addEventListener("DOMContentLoaded", async () => {
    const rateData = await get_usd2inr();
    Alpine.store('local_data').xe = rateData;
});

Alpine.store('local_data', {
    // 初始默认汇率
    xe: { usd2inr: 0 },

    get ri_total() {
        let usd2inr = this.xe.usd2inr;
        let total = parseFloat(250 * usd2inr).toFixed(2);        
        const formatedNumber = new Intl.NumberFormat('en-IN', { currency: 'INR' }).format(total);
        return formatedNumber;
    }
});

方案3：添加加载状态（可选） #

如果需要在数据加载完成前给用户提示，可以修改HTML做条件渲染：

<input
    type="text" id="ri-total"
    :value="$store.local_data.xe.usd2inr === 0 ? '加载中...' : $store.local_data['ri_total']"
    x-mask-x:dynamic="$money($input)"
    readonly    
/>

也可以直接显示0，根据需求调整提示内容。

内容的提问来源于stack exchange，提问作者anjanesh