Svelte 5：外部模块中$state响应式拖拽监听问题

要让外部.svelte.js模块能正确更新组件内定义的$state变量并触发响应式，核心是直接传递响应式变量的引用给模块逻辑，而不是传递其当前值。下面是具体实现方案：

1. 重构外部辅助模块（helpers.svelte.js） #

编写初始化拖拽逻辑的函数，直接接收组件内的响应式position变量作为参数，在拖拽事件中直接修改该变量的属性：

// helpers.svelte.js
export function initDrag(element, position) {
  let startX, startY;

  function handleMouseDown(e) {
    startX = e.clientX - position.x;
    startY = e.clientY - position.y;
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
  }

  function handleMouseMove(e) {
    // 直接修改传入的响应式变量属性
    position.x = e.clientX - startX;
    position.y = e.clientY - startY;
  }

  function handleMouseUp() {
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
  }

  element.addEventListener('mousedown', handleMouseDown);

  // 返回清理函数，用于组件销毁时移除监听
  return () => {
    element.removeEventListener('mousedown', handleMouseDown);
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
  };
}

export function handleClick(position) {
  // 同样直接修改响应式变量
  position.x += 50;
  position.y += 50;
}

2. 在+page.svelte中使用模块逻辑 #

定义响应式position变量，将其引用传递给辅助函数，确保模块能直接操作该变量：

<script>
  import { $state, $inspect, onMount, onDestroy } from 'svelte';
  import { initDrag, handleClick } from './helpers.svelte.js';

  let position = $state({ x: 0, y: 0 });
  $inspect(position, 'position updated');

  let dragElement;
  let cleanupDrag;

  onMount(() => {
    // 将元素和响应式position变量传递给初始化函数
    cleanupDrag = initDrag(dragElement, position);
  });

  onDestroy(() => {
    cleanupDrag?.();
  });
</script>

<button on:click={() => handleClick(position)}>移动位置</button>
<div 
  bind:this={dragElement}
  style="position: absolute; left: {position.x}px; top: {position.y}px; width: 100px; height: 100px; background: red; cursor: move;"
></div>

关键原理说明 #

• 之前拖拽无响应式更新的原因：如果传递的是position.x/position.y的当前值，或者在模块中创建了变量副本，Svelte无法追踪到这些非响应式变量的变化。而直接传递$state定义的变量引用，修改其属性时，Svelte的响应式系统会自动感知并触发更新。
• 无需额外getter/setter：$state定义的变量本身就是响应式的，只要直接操作它，就能触发组件的重新渲染。
• 关于Store的问题：如果使用Store，在外部模块中需要通过store.set()或store.update()方法修改状态，而不是直接修改Store的值，否则无法触发响应式。但对于这种组件内的局部状态，$state是更轻量的选择。

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