# globostate 中文文档

规范地址：https://npmcn.com/package/globostate/

版本：0\.5\.0
npm 元数据更新时间：2026-11-03T16:22:35.068Z
中文译文更新时间：2026-11-03T19:28:14.895Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/globostate
原文对照：https://npmcn.com/package/globostate/?lang=original
项目主页：https://github.com/harryhope/globostate#readme
源码仓库：https://github.com/harryhope/globostate

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.9 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^20\.19\.0 \|\| \>=22\.12\.0
- 运行依赖：0 个
- peer 依赖：react \>=18\.0\.0
- 首次发布：2024-01-06T04:55:18.415Z
- 最新版本发布：2026-11-03T16:22:34.789Z
- 已发布版本数：7（近 12 个月 1 个）

## 中文简介

React的基于路径的状态容器

## 安装

```sh
npm install globostate
```

也可以使用：`pnpm add globostate`、`yarn add globostate`、`bun add globostate`

## README

# Globostate

Globostate是一个 [反应钩](https://react.dev/reference/react/hooks) 这将创建一个全局的、不可变的状态，并允许您使用类似的路径语法来读取和更新它的任何部分 [lodash的](https://lodash.com/) `_.get` 和 `_.set` 功能。

**它看起来是这样的：**

```js
const ExampleComponent = ()  => {
  const [count, setCount] = useGloboState('app.components.counterValue', 0)
  return (
    <main>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </main>
  )
}
```

## 开始

Globostate需要React作为对等依赖。首先：

```
npm i react react-dom globostate
```

### 提供者

Globostate包括一个 `Provider` 必须包装应用程序的组件：

```js
import React from 'react'
import { createRoot } from 'react-dom/client'
import { Provider, useGloboState } from 'globostate'

const container = document.getElementById('app')
const root = createRoot(container)

root.render(
  <Provider>
    <App />
  </Provider>
)
```

### 钩子

这个 `useGloboState` hook的工作原理与React非常相似 `useState` 但是全局状态可以在应用程序的任何地方访问，而不需要通过props钻取状态。

`useGloboState` 接受两个参数。第一个是对象路径，用点和括号索引(`'lists.todos[0].title'`)或作为键数组(`['lists', 'todos', 0, 'title']`）. 更新是不可变的：只复制该路径上的对象。第二种是初始状态，类似于 `useState`是唯一的参数。

```js
const [todos, setTodos] = useGloboState('appState.lists.todos', [])
```

只要路径中还没有存储任何内容，就返回默认值。在调用setter之前，它不会被写入存储中。

### 更新功能

就像 `useState`， setter也接受一个函数。它接收当前值（或默认值，如果还没有存储）并返回下一个值：

```js
const [count, setCount] = useGloboState('app.count', 0)
setCount(c => c + 1)
```

因为传递给setter的函数总是被视为更新器，所以通过包装来存储函数： `setHandler(() => myFunction)`。

### 路径

-   **点和括号：** `'lists.todos[0].title'` 和 `'lists.todos.0.title'` 都是同一条路。
-   **键数组：** `['lists', 'todos', 0, 'title']`． 当键包含点或括号时使用此格式。
-   **创建缺失的关卡：** 当一个set经过一个还不存在的级别时，如果下一个键是一个非负整数，globostate将创建一个数组(`0`， `12`)，否则为普通对象。
-   **不支持:** 引用的键，如 `a["b"]`。

### 重新渲染

组件只有在其路径上的值改变时才会重新呈现。数组和普通对象的比较比较比较浅，所以设置一个相等的副本不会重新渲染。其他所有内容，包括date、Maps、Sets和类实例，都是通过引用进行比较的，所以要替换这些值，而不是改变它们。

### 独立的商店

`Provider` 和 `useGloboState` 共享一个商店。要创建独立存储，例如为自包含的小部件或库创建独立存储，请调用 `createProvider`：

```js
import { createProvider } from 'globostate'

const { Provider: WidgetProvider, useGloboState: useWidgetState } = createProvider()
```

### 需求

-   React 18或更新版本。
-   globostate作为ES模块发布。 `import` 作品无处不在。加载 `require()` 需要节点20.19+或22.12+。

### 把它们放在一起

完整的应用程序可能是这样的：

```js
import React from 'react'
import { createRoot } from 'react-dom/client'
import { Provider, useGloboState } from 'globostate'

const App = () => {
  const [value, updateValue] = useGloboState('app.counterValue', 0)
  return (
    <main>
      <div><button onClick={() => updateValue(value - 1)}>-</button></div>
      <div>{value}</div>
      <div><button onClick={() => updateValue(value + 1)}>+</button></div>
    </main>
  )
}

const container = document.getElementById('app')
const root = createRoot(container)

root.render(
  <Provider>
    <App />
  </Provider>
)
```

## 常见问题

### globostate 是什么？

React的基于路径的状态容器

### 如何安装 globostate？

在项目目录运行 npm install globostate，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### globostate 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### globostate 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### globostate 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^20\.19\.0 \|\| \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### globostate 可以商用吗？

globostate 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### globostate 还在维护吗？

最新版本 0\.5\.0 发布于 2026/11/04（今天）；至今共发布 7 个版本，其中过去 12 个月发布了 1 个；首次发布于 2024/01/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。