面试题：Solid.js全局状态管理的实践应用

在Solid.js中，可以使用createContext和createSignal来实现全局状态管理，从而在不同页面间共享用户登录状态等全局状态。以下是具体步骤和代码示例：

创建全局状态：使用createSignal创建用于存储用户登录状态的信号（signal）。

import { createSignal } from 'solid-js';

// 创建用户登录状态的信号，初始值为false表示未登录
const [isLoggedIn, setIsLoggedIn] = createSignal(false);

创建上下文（Context）：使用createContext创建一个上下文，将登录状态信号传递下去。

import { createContext } from'solid-js';

// 创建上下文
const LoginContext = createContext({
    isLoggedIn,
    setIsLoggedIn
});

提供上下文：在应用的顶层组件中，使用LoginContext.Provider将上下文提供给整个应用。

import { render } from'solid-js/web';
import { LoginContext } from './LoginContext';

const App = () => {
    return (
        <LoginContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
            {/* 应用的其他组件 */}
        </LoginContext.Provider>
    );
};

render(() => <App />, document.getElementById('app'));

消费上下文：在需要使用登录状态的组件中，通过LoginContext.Consumer来获取上下文，并使用其中的状态和更新函数。

import { LoginContext } from './LoginContext';

const SomeComponent = () => {
    const { isLoggedIn, setIsLoggedIn } = LoginContext.useContext();

    const handleLogin = () => {
        setIsLoggedIn(true);
    };

    return (
        <div>
            {isLoggedIn()? (
                <p>已登录</p>
            ) : (
                <button onClick={handleLogin}>登录</button>
            )}
        </div>
    );
};

数据更新和状态同步：当调用setIsLoggedIn函数更新登录状态时，依赖于isLoggedIn信号的所有组件都会自动重新渲染，从而实现不同组件间的状态同步。例如在SomeComponent中，当点击登录按钮调用handleLogin函数，isLoggedIn的值更新，组件会重新渲染，显示“已登录”。

通过以上步骤，就可以在Solid.js的多页面应用中实现全局状态管理，在不同页面和组件间共享和同步用户登录状态等全局状态。

星途面试题库

面试题：Solid.js全局状态管理的实践应用

知识考点

面试题答案