快速开始#

要求#

• ES6+
• React18+

安装#

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

npm install pinia-react

创建一个 pinia 实例

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 将所有共享状态集中存放在一个地方，避免了数据分散和混乱，让应用状态变得可预测且易于追踪。

• 解耦： Store 将状态管理从组件中分离出来，组件只需要关心如何使用和展示数据，而不需要关心数据来自哪里或如何修改，这大大降低了组件间的耦合度。

• 可测试性： 集中管理的状态和逻辑使得编写单元测试变得更简单，因为你可以在不渲染组件的情况下测试 Store 的行为。

应该在什么时候使用 Store?#

一个 store 应该包含整个应用可以访问到的数据，例如主题，用户登录状态等等。或者是你有一个复杂交互性的页面，里面会用多个组件，这些组件都会有自己的状态，这种场景就可以考虑用一个 store 管理状态和业务逻辑，提高效率。

什么时候不应该使用 Store#

只在当前页面或者当前组件使用的状态，并没有需要通信或者依赖关系的需求，就没有必要使用一个单独的 store 来创建和管理。