Vuex中currentSalar类型转换问题：二次计算出现NaN异常

你的问题核心是第一次操作后currentSalar被改成了带货币格式的字符串，第二次计算时直接用字符串减数字，结果自然是NaN。而且你代码里的parseFloat(registerToUpdate.currentSalar)没有赋值给变量，等于白执行了。

最佳实践（推荐） #

状态里应该存原始数字值，格式化展示的逻辑放到组件里做。这样状态始终保持可计算的数字类型，不会出现类型混乱：

• Vuex的state中currentSalar始终保留数字类型，不要修改成字符串。
• 在需要展示的组件里，用过滤器或者直接格式化：

// 组件内定义过滤器
filters: {
  formatCurrency(value, currency) {
    return new Intl.NumberFormat("il-IL", {
      style: "currency",
      currency: currency,
    }).format(value);
  }
}

// 模板中使用
{{ currentSalar | formatCurrency(currency) }}

直接修改现有代码（若必须在Store内处理） #

如果一定要在Store里完成计算+格式化，每次计算前必须把字符串转成可计算的数字，还要清理货币字符串里的符号、逗号等干扰字符：

export default {
  addRegister(state, payload) {
    const registerToUpdate = state.registers.find(
      (register) => register.id === payload.id
    );

    const currency = registerToUpdate.currency;
    const expenses = registerToUpdate.expense;

    // 将currentSalar转为数字：字符串类型先清理非数字字符再转浮点数
    const currentSalarNum = typeof registerToUpdate.currentSalar === "string" 
      ? parseFloat(registerToUpdate.currentSalar.replace(/[^0-9.-]/g, '')) 
      : registerToUpdate.currentSalar;
    
    // 计算新总额
    const total = currentSalarNum - payload.salary;

    // 格式化后赋值回状态
    registerToUpdate.currentSalar = new Intl.NumberFormat("il-IL", {
      style: "currency",
      currency: currency,
    }).format(total);
    
    // 格式化支出金额
    payload.salary = new Intl.NumberFormat("il-IL", {
      style: "currency",
      currency: currency,
    }).format(payload.salary);

    expenses.unshift(payload);
  },
};

关键修改点： #

• 用replace(/[^0-9.-]/g, '')清理货币字符串中的符号、逗号，比如"₪1,234.56"会转为"1234.56"，确保转数字时不会出错。
• 先计算出数字类型的总额，再进行格式化，从根源避免类型混乱导致的NaN问题。

内容的提问来源于stack exchange，提问作者Jaime Uriel Kasabe