定义 Store
Store 使用 defineStore() 进行定义。它的第一个参数是一个唯一的 ID，Pinia 使用它来标识这个 Store。
同一个 Pinia 实例内的 Store ID 应唯一。重复定义会在开发时告警，请为不同 Store 使用不同 ID。
import { defineStore } from 'pinia-react'
// `defineStore()` 会根据 Store ID 自动生成命名函数。
// 对于 `alerts`，生成的函数是 `useAlertsStore` 和 `getAlertsStore`。
const { useAlertsStore, getAlertsStore } = defineStore('alerts', {
// 其他配置...
})
按照惯例，建议导出的 Hook 名称以 use 开头并以 Store 结尾（例如 useUserStore, useCartStore）。这符合 React Hooks 的命名规范。
Option Store (选项式 Store)
你需要通过传递一个包含 state、getters 和 actions 属性的选项对象来定义 Store 的配置。
export const { useCounterStore, getCounterStore } = defineStore('counter', {
state: () => ({ count: 0, name: 'Eduardo' }),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})
使用 Store
定义好 Store 后，只需在组件中导入并调用对应的 Hook 即可。
import React from 'react';
import { useCounterStore } from './counterStore';
export function App() {
const counter = useCounterStore();
return (
<div>
<h2>Pinia-React Count: {counter.count}</h2>
</div>
);
}
Provider 与组件外访问
组件 Hook 优先使用最近的 PiniaProvider，其次是 active Pinia。普通访问函数不读取 React Context，多实例服务使用 getCounterStore(pinia)。实例生命周期见组件外使用，请求快照见 Next.js。简单的单根客户端接入不需要 Provider。