导入的模块变量更新后未变化的技术问题

你遇到的核心问题是：pageStatus 对象初始化时只是复制了 Home、About 等变量的初始值，后续修改这些单个变量时，pageStatus 内部的属性不会自动更新——因为JavaScript的原始类型（boolean）是按值传递的，对象里存的是副本，不是对原变量的引用。

以下是几种可行的修复方式：

方式1：使用Svelte的响应式store（推荐） #

Svelte的store天生支持跨组件的响应式更新，适合这种状态共享场景：

修改 navbar.ts #

import { writable } from 'svelte/store';

// 创建可写的store对象
export const pageStatus = writable({
  Home: true,
  About: false,
  Projects: false,
  Contact: false
});

// 可选：封装统一更新方法，方便管理单选逻辑
export function updatePageStatus(page: keyof typeof $pageStatus, value: boolean) {
  pageStatus.update(status => {
    status[page] = value;
    // 如果需要单选（同一时间只有一个页面为true），可以重置其他状态
    Object.keys(status).forEach(key => {
      if (key !== page) status[key] = false;
    });
    return status;
  });
}

修改 Header.svelte #

<script>
  import { pageStatus } from "$lib/header/navbar";
  // 用$前缀订阅store，自动响应更新
  $: console.log($pageStatus);
</script>

方式2：让pageStatus返回实时值 #

如果不想用store，可以把pageStatus改成函数，每次调用都返回最新的变量状态：

修改 navbar.ts #

export let Home: boolean = true;
export let About: boolean = false;
export let Projects: boolean = false;
export let Contact: boolean = false;

// 改成函数，每次调用获取最新值
export function getPageStatus() {
  return { Home, About, Projects, Contact };
}

修改 Header.svelte #

<script>
  import { getPageStatus, Home, About, Projects, Contact } from "$lib/header/navbar";
  // 监听原始变量变化，自动同步最新状态
  $: pageStatus = getPageStatus();
  $: console.log(pageStatus);
</script>

方式3：直接更新pageStatus对象属性 #

放弃单独修改Home、About等变量，直接修改pageStatus的属性，这样引用该对象的组件能实时拿到最新值：

修改 navbar.ts #

export let pageStatus = {
  Home: true,
  About: false,
  Projects: false,
  Contact: false
};

更新状态的逻辑（比如在其他组件中） #

import { pageStatus } from "$lib/header/navbar";

// 直接修改对象属性
pageStatus.Home = false;
pageStatus.About = true;

修改 Header.svelte #

<script>
  import { pageStatus } from "$lib/header/navbar";
  // 监听对象属性变化
  $: console.log(pageStatus);
</script>

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