本文讲解如何通过 Svelte 的 writable store 替代局部响应式声明，解决因响应式依赖不完整导致的 ScoreBoard 组件未及时重渲染的问题。核心在于将 game 状态提升至 store 层，并在状态变更时主动触发更新。
本文讲解如何通过 svelte 的 `writable store` 替代局部响应式声明，解决因响应式依赖不完整导致的 `scoreboard` 组件未及时重渲染的问题。核心在于将 `game` 状态提升至 store 层，并在状态变更时主动触发更新。
在 Svelte 开发中，当组件依赖外部对象的深层属性（如 game.tricks）进行响应式计算时，若仅监听 game.tricks 本身而未正确捕获其内部变化（例如数组 push、splice 或嵌套对象更新），Svelte 的响应式系统可能无法触发重新计算——尤其当 tricks 是通过引用修改而非整体赋值时。
你原始代码中的 $: { game.tricks; scores = getRunningScores(); } 存在两个关键问题：
-
响应式依赖不充分：
game.tricks是一个数组，Svelte 仅在game.tricks引用变更时触发响应式块；但实际中tricks.push(newTrick)不会改变引用，因此$:块不会执行； -
副作用逻辑耦合过重：
getRunningScores()在响应式块中被调用，但其返回值scores并未作为独立响应式源参与后续渲染，且scores = scores是无意义赋值，无法建立有效的更新链路。
✅ 正确解法是将 game 状态托管至 writable store，统一管理状态变更，并确保每次分数更新都显式触发 store 更新，从而驱动所有订阅组件（包括 <scoreboard></scoreboard>）重渲染。
✅ 推荐实现：使用 writable Store 管理游戏状态
首先，在 src/lib/store.js 中定义 store：
import { writable } from 'svelte/store';
export const game = writable({
deck: undefined,
players: [],
tricks: [],
contract: {},
scores: {} // 初始化为空对象，结构如 { '0_1': 42, '2_3': 38 }
});然后在 ScoreBoard.svelte 所在组件中使用：
<script>
import { game } from './store.js';
import ScoreBoard from './ScoreBoard.svelte';
// 响应式订阅 game，并在 tricks 变化且当前牌局完成时更新 scores
$: {
const tricks = $game.tricks;
const isTrickComplete = faeko?.isTrickComplete?.() ?? false;
if (tricks.length > 0 && isTrickComplete) {
game.update(current => {
const newScores = faeko.trickScore();
console.log('Updated scores:', newScores);
return { ...current, scores: newScores };
});
}
}
</script>
<div class:score-board={$game.tricks.length > 0}>
{#if $game.tricks.length > 0}
<ScoreBoard players={$game.players} scores={$game.scores} />
{:else}
<div class="contract-div">
<p class="label">Score</p>
<div class="contract-container">
<span class="nick-name"></span>
<div class="contract">
<div class="value"><span></span></div>
</div>
<div class="dblRdbl"></div>
</div>
</div>
{/if}
</div>⚠️ 注意事项与最佳实践
-
避免在
$:块中执行异步或副作用密集操作：faeko.trickScore()应为纯函数（无副作用、输入确定输出），否则难以调试和测试； -
isTrickComplete必须可靠：确保faeko.isTrickComplete()能准确反映当前 trick 是否已满 4 张牌且已结算； -
Store 更新需保持不可变性：使用
update()+ 展开运算符（{...current, scores: newScores}）确保新对象被创建，Svelte 才能检测到变更； -
组件内无需再声明
let scores：所有状态均由 store 驱动，$game.scores即为最新分数，天然响应式； - 若需跨组件共享
faeko实例，建议也封装为 store 或 context，避免隐式依赖。
通过将状态提升至 store 层，你不仅解决了重渲染失效问题，还提升了应用的可维护性与可测试性——状态变更路径清晰、可观测、可追溯。这是构建复杂 Svelte 应用的推荐范式。
