Pinia-React
指南
指南
简体中文

在组件外使用 Store

Pinia-React 的 Store 不仅可以在 React 组件内部使用，也可以在外部使用。虽然 useStore() 是专门为组件设计的 Hook，但在其他场景下，你可以使用 getStore() 函数。

getStore 函数

当你定义一个 Store 时，defineStore() 会返回一个包含 useStore（Hook）和 getStore（普通函数）的对象。

推荐的模式是从 Store 定义文件中同时导出这两个函数。

src/stores/auth-store.ts
import { defineStore } from 'pinia-react'

const { useStore, getStore } = defineStore('auth', {
  state: () => ({
    isAuthenticated: false,
    // ...
  }),
  actions: {
    logout() {
      this.isAuthenticated = false
    }
  }
})

export const useAuthStore = useStore
export const getAuthStore = getStore

使用示例

现在，你可以在任何 JavaScript 模块中导入 getAuthStore，比如在服务文件、API 客户端或另一个 Store 的 Action 中。

下面是一个在工具函数中调用 Store Action 的例子：

src/auth-service.ts
import { getAuthStore } from './stores/auth-store'

export function performLogout() {
  // 通过调用 getStore() 获取 Store 实例
  const authStore = getAuthStore()

  // 现在你可以访问 state、getter 或 action 了
  if (authStore.isAuthenticated) {
    authStore.logout()
    console.log('用户已登出。')
  }
}

这种模式确保了无论你是在组件内部还是外部，访问的始终是同一个全局单例的 Store 实例。

大纲