Sapper项目中的状态管理：深入理解Stores机制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00406/article/details/148465035

Sapper项目中的状态管理：深入理解Stores机制

sapper The next small thing in web development, powered by Svelte 项目地址: https://gitcode.com/gh_mirrors/sa/sapper

前言

在Sapper框架中，状态管理是一个核心概念，它通过Stores机制实现了组件间的数据共享和响应式更新。本文将全面解析Sapper中的Stores系统，帮助开发者掌握这一重要特性。

什么是Stores？

Stores是Svelte生态中的状态管理工具，它提供了一种响应式的方式来管理和共享应用状态。在Sapper项目中，框架内置了几个特殊的Stores，使得开发者能够轻松访问路由、会话等关键信息。

内置Stores详解

在Sapper组件中，我们可以通过stores()函数获取三个内置的Store：

<script>
	import { stores } from '@sapper/app';
	const { preloading, page, session } = stores();
</script>

1. preloading Store

preloading是一个只读的布尔值Store，用于指示当前是否有导航正在等待处理。这在实现加载指示器时非常有用：

{#if $preloading}
	<div class="spinner">加载中...</div>
{/if}

2. page Store

page Store包含了当前路由的只读信息，其结构与preload函数接收的page参数相同，包括：

path：当前URL路径
params：路由参数对象
query：查询字符串参数对象

这个Store会在路由变化时自动更新，触发依赖它的组件重新渲染。

3. session Store

session是一个可写的Store，用于在客户端和服务器端之间共享会话数据。这是Sapper状态管理中最强大的工具之一。

会话数据管理

初始化会话数据

默认情况下，session Store是undefined。我们需要在服务器端初始化它：

// src/server.js
polka()
	.use(
		sapper.middleware({
			session: (req, res) => ({
				user: req.user,
				token: req.token
			})
		})
	)

会话数据的特点

可序列化：会话数据必须能够被序列化为JSON，不能包含函数或自定义类
异步支持：session函数可以返回Promise或使用async/await
自动更新：对于服务器渲染的每个页面路由，都会重新获取会话数据

客户端更新会话

由于session是可写的Store，我们可以在客户端更新它：

import { session } from '@sapper/app/stores';

function login(user) {
	session.update(prev => ({ ...prev, user }));
}

最佳实践

最小化会话数据：只存储必要的会话信息，避免传输大量数据
类型安全：考虑为会话数据定义TypeScript接口或Flow类型
错误处理：对于异步会话数据，添加适当的错误处理逻辑
性能优化：对于频繁访问的会话数据，考虑使用派生Store

高级用法

派生Store

基于内置Store创建派生Store可以实现更复杂的状态逻辑：

import { derived } from 'svelte/store';
import { session } from '@sapper/app/stores';

export const isAdmin = derived(
	session,
	$session => $session?.user?.role === 'admin'
);

持久化

结合浏览器存储实现会话持久化：

if (process.browser) {
	const storedSession = localStorage.getItem('session');
	if (storedSession) {
		session.set(JSON.parse(storedSession));
	}
	
	session.subscribe($session => {
		localStorage.setItem('session', JSON.stringify($session));
	});
}