导出变量值被修改后，导入它的文件会同步更新吗？如何实现？

1. 导入的count值不会更新 #

你当前的代码里，export default count导出的是原始值（number）的副本。当index.js导入这个count时，拿到的是初始化时的0，之后main.js里调用increase()修改的是本地的count变量，和index.js里的副本没有关联，所以不会同步更新。

2. 实现同步的几种方案 #

方案一：导出引用类型的对象

把count放在一个对象里导出，因为对象是引用类型，导入的地方拿到的是同一个引用，修改对象的属性会同步反映到导入端：

// main.js
const state = {
  count: 0
}

function increase(){
  state.count += 1
}

export default state

// index.js
import state from './main.js'

// 每次需要获取最新值时，直接访问state.count
console.log(state.count) // 初始0
// 点击按钮调用increase后，再打印就是最新值

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

通过函数来返回最新的count，确保每次获取的都是当前的最新值：

// main.js
let count = 0

function increase(){
  count += 1
}

function getCount(){
  return count
}

export { increase, getCount }

// index.js
import { getCount } from './main.js'

// 需要最新值时调用getCount()
console.log(getCount()) // 初始0
// 点击按钮后调用getCount()就能拿到更新后的值

方案三：订阅发布模式（适合需要自动更新的场景）

如果希望count变化时自动通知导入端更新，可以自己实现简单的订阅发布逻辑：

// main.js
let count = 0
const subscribers = []

function increase(){
  count += 1
  // 通知所有订阅者更新
  subscribers.forEach(cb => cb(count))
}

// 提供订阅方法，外部可以注册回调
function subscribe(callback){
  subscribers.push(callback)
  // 订阅时先同步一次当前值
  callback(count)
}

export { increase, subscribe }

// index.js
import { subscribe } from './main.js'

// 订阅count的变化，每次变化时执行回调更新本地逻辑
subscribe((latestCount) => {
  console.log('最新count值:', latestCount)
  // 这里可以更新页面显示或其他逻辑
})

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