Svelte中如何为on:pointerup内的isWsAndFetchOngoing添加响应式

方案1：用响应式声明监听属性变化（最小代码修改） #

如果不想改动全局对象的结构，直接在组件内添加一段响应式代码，监听isWsAndFetchOngoing的状态变化：

<script>
  // 原有代码：引入或定义全局对象
  import globalMenuSelection from './path/to/global';

  // 原有pointerup事件处理函数
  function handlePointerUp() {
    if (globalMenuSelection.isWsAndFetchOngoing) return;
    switchBackgroundAnimation(globalMenuSelection.selectedItem);
  }

  // 原有动画切换逻辑
  function switchBackgroundAnimation(item) {
    // 你的动画实现代码
  }

  // 新增：响应式监听，当isWsAndFetchOngoing从true变为false时自动触发动画
  $: {
    if (!globalMenuSelection.isWsAndFetchOngoing && globalMenuSelection.selectedItem) {
      switchBackgroundAnimation(globalMenuSelection.selectedItem);
    }
  }
</script>

<!-- 原有模板结构 -->
<div on:pointerup={handlePointerUp}>...</div>

注意：如果globalMenuSelection是纯全局普通对象，直接修改其isWsAndFetchOngoing属性不会触发组件重渲染。若无法修改全局属性的赋值逻辑，可以临时用$: forceUpdate = Date.now()，在修改属性后更新forceUpdate值触发重渲染，但更稳定的方案是方案2。

方案2：转为Svelte Writable Store（彻底解决响应式） #

仅需将全局对象改为Svelte的writable store，组件内用$前缀访问值，原有业务逻辑几乎无需修改：

1. 全局文件（如stores.js）：

import { writable } from 'svelte/store';

// 用writable包裹原有对象结构
export const globalMenuSelection = writable({
  isWsAndFetchOngoing: false,
  selectedItem: null,
  // 其他原有属性
});

2. 组件内使用：

<script>
  import { globalMenuSelection } from './stores.js';

  function handlePointerUp() {
    // 用$前缀获取store当前值
    if ($globalMenuSelection.isWsAndFetchOngoing) return;
    switchBackgroundAnimation($globalMenuSelection.selectedItem);
  }

  // 响应式监听状态变化
  $: {
    if (!$globalMenuSelection.isWsAndFetchOngoing && $globalMenuSelection.selectedItem) {
      switchBackgroundAnimation($globalMenuSelection.selectedItem);
    }
  }

  function switchBackgroundAnimation(item) {
    // 你的动画实现代码
  }
</script>

<div on:pointerup={handlePointerUp}>...</div>

问题根源 #

Svelte的响应式依赖变量引用变化，普通对象的内部属性修改不会触发组件重渲染。当isWsAndFetchOngoing从true变回false时，组件未感知到变化，因此不会执行动画切换逻辑。上述方案要么通过响应式声明强制检查状态，要么用store让属性变化自动触发组件更新。

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