导入文件变量未更新：调用changeNumber()后testNumber值无变化求助

兄弟我太懂你这困扰了！之前做模块拆分的时候我也踩过一模一样的坑，咱们先把问题根源说清楚，再给你适配现有结构的解决方案～

问题出在哪？ #

你在ChildFile里导出的testNumber是基本类型（数字），当ConsumerFile导入它的时候，拿到的其实是这个值的副本快照，不是对原变量的引用。所以changeNumber()在ChildFile里修改的是本地的testNumber，但ConsumerFile里的那个变量还是导入时的旧值（123），自然看不到变化。

保留现有结构的解决方案 #

下面两种方法都不用改你的模块拆分结构，选哪种看你习惯：

方案1：把变量包装成对象（推荐）

基本类型是值传递，但对象是引用传递，把testNumber放到对象里，导入后操作对象的属性就能同步更新：

ChildFile.js代码调整：

// 用对象包裹变量，导出这个对象
export const numberState = {
  testNumber: 123
};

export function changeNumber() {
  // 修改对象的属性，而不是直接修改基本类型变量
  numberState.testNumber += 1;
}

ConsumerFile.js里这样用：

import { numberState, changeNumber } from './ChildFile';

console.log(numberState.testNumber); // 调用前：123
changeNumber();
console.log(numberState.testNumber); // 调用后：124

方案2：导出获取最新值的函数

如果不想用对象，也可以在ChildFile里保留原始变量，额外导出一个获取最新值的函数，每次需要值的时候调用这个函数：

ChildFile.js代码调整：

// 用let声明变量（const没法修改）
let testNumber = 123;

// 导出获取最新值的函数
export function getTestNumber() {
  return testNumber;
}

export function changeNumber() {
  testNumber += 1;
}

ConsumerFile.js里这样用：

import { getTestNumber, changeNumber } from './ChildFile';

console.log(getTestNumber()); // 调用前：123
changeNumber();
console.log(getTestNumber()); // 调用后：124

为啥这两种方法能行？ #

• 方案1里，导入的numberState是对象的引用，不管在哪修改它的属性，所有持有这个引用的地方都能看到变化。
• 方案2里，每次调用getTestNumber()都会直接去ChildFile里读取最新的testNumber值，自然能拿到更新后的结果。

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