快速开始#

环境要求#

• ES6+
• React 18+

安装#

使用你喜欢的包管理器安装 pinia-react：

npm install pinia-react

创建一个 Pinia 实例，并在应用程序的根目录下调用一次。这对于确保所有 Store 共享同一个全局状态容器至关重要。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './App'
import './style.css'
import { createPinia } from 'pinia-react'

createPinia()

createRoot(document.querySelector('#app')!).render(
  <StrictMode>
    <App />
  </StrictMode>
)

什么是 Store？#

Store（仓库）是一个实体，它封装了应用中的全局状态（State）、修改状态的业务逻辑（Actions）以及从状态衍生的可读数据（Getters）。它允许应用中的任何组件访问和修改共享数据，从而实现跨组件通信和状态同步。

• 单一数据源（Single Source of Truth）： Store 将所有共享状态集中在一个地方，避免了数据分散和混乱，使应用状态可预测且易于追踪。
• 解耦（Decoupling）： Store 将状态管理与组件分离。组件只需要关心如何使用和展示数据，而不需要关心数据来自哪里或如何被修改，这极大地降低了组件间的耦合度。
• 可测试性（Testability）： 集中式的状态管理和逻辑使得编写单元测试变得更简单，因为你可以在不渲染组件的情况下测试 Store 的行为。

什么时候应该使用 Store？#

Store 应该包含那些需要在整个应用中访问的数据，例如主题配置、用户登录状态等。或者，如果你有一个复杂的交互页面，包含多个拥有各自状态的组件，这种场景下也可以考虑使用 Store 来管理状态和业务逻辑，以提高效率。

什么时候不应该使用 Store？#

如果状态只在当前页面或组件中使用，且没有通信或依赖需求，那么就没有必要创建和管理一个单独的 Store。