Svelte 自定义 store 实战：实现一个主题切换功能
1. 前端开发中的主题切换需求
在现代前端应用开发中，主题切换功能越来越成为一个常见需求。用户期望能够根据自己的喜好或使用场景，轻松切换应用的外观主题，如从亮色主题切换到暗色主题，以适应不同的环境光线或个人偏好。这种功能不仅提升了用户体验，还增加了应用的灵活性和易用性。
在实现主题切换功能时，我们需要考虑多个方面。首先，要能够在应用的不同组件中方便地获取和修改当前主题状态。其次，当主题状态发生变化时，所有依赖该主题的组件应该能够自动更新，以反映新的主题样式。这就涉及到状态管理的问题，而 Svelte 的 store 为我们提供了一种优雅的解决方案。
2. Svelte 中的 store 基础
2.1 什么是 Svelte store
Svelte 的 store 是一种用于管理应用状态的机制。它本质上是一个包含 subscribe 方法的对象，该方法用于注册一个回调函数，当 store 的值发生变化时，这个回调函数会被调用。此外，store 通常还包含 set 和 update 方法，用于更新 store 的值。
例如，创建一个简单的 Svelte store：
<script>
import { writable } from'svelte/store';
const count = writable(0);
const unsubscribe = count.subscribe((value) => {
console.log(`The value of count has changed to: ${value}`);
});
// 更新 store 的值
count.set(1);
// 使用 update 方法更新 store 的值
count.update((n) => n + 1);
// 取消订阅
unsubscribe();
</script>
在上述代码中，我们使用 writable 函数创建了一个名为 count 的 store。通过 subscribe 方法注册了一个回调函数，当 count 的值发生变化时，该回调函数会将新的值打印到控制台。然后，我们使用 set 方法直接设置 count 的值为 1，又使用 update 方法将 count 的值在当前基础上加 1。最后，通过调用 unsubscribe 取消了订阅。
2.2 内置的 store 类型
Svelte 提供了几种内置的 store 类型，除了 writable 之外，还有 readable 和 derived。
- readable：用于创建只读的 store。这种 store 的值不能直接通过
set或update方法修改，适用于表示那些由外部数据源驱动且不应该在应用内部直接修改的状态，比如当前设备的屏幕宽度等。
<script>
import { readable } from'svelte/store';
const screenWidth = readable(window.innerWidth, (set) => {
const handleResize = () => set(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
});
let width;
const unsubscribe = screenWidth.subscribe((value) => {
width = value;
});
</script>
<p>The current screen width is: {width}</p>
在这段代码中，我们创建了一个 readable store screenWidth，它的值初始化为当前窗口的宽度。通过传入的第二个参数，我们在 subscribe 时添加了一个 resize 事件监听器，每当窗口大小改变时，就更新 store 的值。返回的函数用于在取消订阅时移除事件监听器。
- derived：用于创建派生的 store，其值是基于其他 store 计算得出的。这在处理一些需要根据多个状态计算得到的新状态时非常有用。
<script>
import { writable, derived } from'svelte/store';
const count1 = writable(1);
const count2 = writable(2);
const sum = derived([count1, count2], ([$count1, $count2]) => {
return $count1 + $count2;
});
let result;
const unsubscribe = sum.subscribe((value) => {
result = value;
});
count1.set(3);
</script>
<p>The sum of count1 and count2 is: {result}</p>
这里我们创建了两个 writable store count1 和 count2，然后通过 derived 创建了一个新的 store sum，它的值是 count1 和 count2 的和。当 count1 或 count2 的值发生变化时，sum 的值会自动重新计算并更新订阅者。
3. 自定义 Svelte store 实现主题切换
3.1 创建主题 store
要实现主题切换功能，首先我们需要创建一个自定义的 store 来管理主题状态。假设我们的应用支持亮色（light）和暗色（dark）两种主题。
<script>
import { writable } from'svelte/store';
const themeStore = writable('light');
const toggleTheme = () => {
themeStore.update((theme) => theme === 'light'? 'dark' : 'light');
};
</script>
<button on:click={toggleTheme}>Toggle Theme</button>
在上述代码中，我们使用 writable 创建了一个 themeStore，初始值为 light。同时定义了一个 toggleTheme 函数，它通过 update 方法来切换主题状态。当点击按钮时，toggleTheme 函数会被调用，从而实现主题的切换。
3.2 在组件中使用主题 store
现在我们已经有了主题 store，接下来要在组件中使用它来应用相应的主题样式。假设我们有一个 App.svelte 组件，它包含一些文本和按钮，并且希望根据主题切换文本和按钮的颜色。
<script>
import { onMount } from'svelte';
import { themeStore } from './themeStore.js';
let theme;
const unsubscribe = themeStore.subscribe((value) => {
theme = value;
document.documentElement.setAttribute('data-theme', value);
});
onMount(() => {
return () => {
unsubscribe();
};
});
</script>
<style>
:root {
--text-color: black;
--button-bg-color: lightblue;
}
:root[data-theme='dark'] {
--text-color: white;
--button-bg-color: darkblue;
}
body {
color: var(--text-color);
}
button {
background-color: var(--button-bg-color);
}
</style>
<h1>Welcome to My App</h1>
<button>Click Me</button>
在这个 App.svelte 组件中，我们从外部导入了 themeStore。通过 subscribe 方法订阅了 themeStore 的变化，当主题状态改变时，不仅更新 theme 变量，还在 document.documentElement 上设置 data - theme 属性，用于在 CSS 中根据不同主题应用不同样式。onMount 函数用于在组件销毁时取消订阅，以避免内存泄漏。
在 CSS 部分，我们定义了两组变量，一组是默认的亮色主题样式，另一组是通过 :root[data - theme='dark'] 选择器定义的暗色主题样式。这样，当主题切换时，文本和按钮的颜色会根据当前主题自动更新。
3.3 跨组件共享主题 store
在一个大型应用中，可能有多个组件需要使用主题状态。为了实现跨组件共享主题 store，我们可以将主题 store 放在一个单独的文件中，然后在各个组件中导入使用。
假设我们有一个 Header.svelte 组件和一个 Content.svelte 组件，它们都需要根据主题切换样式。
- Header.svelte
<script>
import { themeStore } from './themeStore.js';
let theme;
const unsubscribe = themeStore.subscribe((value) => {
theme = value;
});
</script>
<style>
:root {
--header - text - color: black;
}
:root[data-theme='dark'] {
--header - text - color: white;
}
h1 {
color: var(--header - text - color);
}
</style>
<h1>App Header</h1>
- Content.svelte
<script>
import { themeStore } from './themeStore.js';
let theme;
const unsubscribe = themeStore.subscribe((value) => {
theme = value;
});
</script>
<style>
:root {
--content - bg - color: white;
}
:root[data-theme='dark'] {
--content - bg - color: black;
}
div {
background-color: var(--content - bg - color);
}
</style>
<div>App Content</div>
在这两个组件中，我们都从 themeStore.js 文件导入了 themeStore，并通过 subscribe 方法订阅主题状态的变化，然后在各自的 CSS 中根据主题应用不同的样式。这样，无论是 Header 组件还是 Content 组件，都能随着主题的切换而自动更新样式，实现了跨组件的主题状态共享。
4. 进一步优化主题切换功能
4.1 持久化主题设置
目前，我们的主题切换功能在页面刷新后会恢复到初始主题。为了让用户的主题设置能够持久化，我们可以使用 localStorage。
<script>
import { writable } from'svelte/store';
const initialTheme = localStorage.getItem('theme') || 'light';
const themeStore = writable(initialTheme);
themeStore.subscribe((value) => {
localStorage.setItem('theme', value);
});
const toggleTheme = () => {
themeStore.update((theme) => theme === 'light'? 'dark' : 'light');
};
</script>
<button on:click={toggleTheme}>Toggle Theme</button>
在上述代码中，我们在创建 themeStore 时，从 localStorage 中读取之前保存的主题设置，如果没有则使用默认的 light 主题。然后，通过 subscribe 方法，每当主题状态发生变化时，将新的主题值保存到 localStorage 中。这样，即使页面刷新，用户的主题设置也能得以保留。
4.2 动态加载主题 CSS
在一些复杂的应用中，可能有多个主题，每个主题都有一套独立的 CSS 文件。我们可以通过动态加载 CSS 文件的方式来实现更灵活的主题切换。
<script>
import { writable } from'svelte/store';
const themeStore = writable('light');
const loadThemeCSS = (theme) => {
const existingLink = document.querySelector('link[data - theme - css]');
if (existingLink) {
document.head.removeChild(existingLink);
}
const link = document.createElement('link');
link.rel ='stylesheet';
link.href = `${theme}.css`;
link.setAttribute('data - theme - css', '');
document.head.appendChild(link);
};
themeStore.subscribe((theme) => {
loadThemeCSS(theme);
});
const toggleTheme = () => {
themeStore.update((theme) => theme === 'light'? 'dark' : 'light');
};
</script>
<button on:click={toggleTheme}>Toggle Theme</button>
在这段代码中，我们定义了一个 loadThemeCSS 函数，它会根据传入的主题名称加载相应的 CSS 文件。当 themeStore 的值发生变化时，subscribe 回调会调用 loadThemeCSS 函数，先移除之前加载的主题 CSS 文件（如果存在），然后加载新的主题 CSS 文件。这样，我们就可以轻松地为应用添加多个主题，并通过切换主题动态加载不同的 CSS 样式。
4.3 支持系统主题感知
现代操作系统通常支持亮色和暗色主题模式，并且应用可以根据系统主题设置自动切换。我们可以利用 window.matchMedia API 来实现这一功能。
<script>
import { writable } from'svelte/store';
const initialTheme = window.matchMedia('(prefers - color - scheme: dark)').matches? 'dark' : 'light';
const themeStore = writable(initialTheme);
const mediaQuery = window.matchMedia('(prefers - color - scheme: dark)');
const handleSystemThemeChange = () => {
const newTheme = mediaQuery.matches? 'dark' : 'light';
themeStore.set(newTheme);
};
mediaQuery.addEventListener('change', handleSystemThemeChange);
themeStore.subscribe((theme) => {
document.documentElement.setAttribute('data - theme', theme);
});
const toggleTheme = () => {
themeStore.update((theme) => theme === 'light'? 'dark' : 'light');
};
</script>
<button on:click={toggleTheme}>Toggle Theme</button>
在上述代码中，我们在创建 themeStore 时，根据 window.matchMedia('(prefers - color - scheme: dark)') 的匹配结果来确定初始主题。然后，我们为 mediaQuery 添加了一个 change 事件监听器，当系统主题模式发生变化时，更新 themeStore 的值，从而实现应用主题与系统主题的同步切换。同时，我们仍然保留了手动切换主题的功能。
5. 总结 Svelte 自定义 store 实现主题切换的要点
通过以上步骤，我们详细介绍了如何使用 Svelte 的自定义 store 来实现主题切换功能。从基础的 store 创建，到在组件中应用主题样式，再到跨组件共享主题状态，以及进一步的功能优化，如持久化主题设置、动态加载主题 CSS 和支持系统主题感知等。
在实现过程中，Svelte 的 store 机制为我们提供了一种简洁且高效的状态管理方式。通过 subscribe 方法，我们能够轻松地监听主题状态的变化，并在组件中做出相应的更新。同时，利用 Svelte 的组件化特性，我们可以将主题相关的逻辑封装在不同的组件和文件中，使代码结构更加清晰，易于维护和扩展。
希望通过本文的介绍，你能够深入理解 Svelte 自定义 store 在实现主题切换功能中的应用，并将这些技巧运用到实际的前端开发项目中，为用户带来更加个性化和友好的应用体验。