在 Astro 组件中共享状态

:::tip想使用框架组件？请参考如何在群岛间共享状态。:::

在构建 Astro 网站时，你可能需要在组件之间共享状态。Astro 推荐使用 Nano Stores 来进行客户端的存储共享。

操作步骤

安装 Nano Stores:
- npm
- pnpm
- Yarn
```
npm install nanostores
```
```
pnpm add nanostores
```
```
yarn add nanostores
```
创建一个存储（store）。在这个例子中，该存储用于跟踪对话框是否打开：
```
import { atom } from 'nanostores';

export const isOpen = atom(false);
```

在要共享状态的组件的 <script> 标签中导入并使用存储。

如下的 Button and Dialog 组件分别使用了共享的 isOpen 状态来控制特定的 <div> 元素是否隐藏或显示：

<button id="openDialog">Open</button>

<script>
  import { isOpen } from '../store.js';
  
  // 当按钮被点击时将状态设置为 true
  function openDialog() {
    isOpen.set(true);
  }

  // 为按钮添加一个事件监听器
  document.getElementById('openDialog').addEventListener('click', openDialog);
</script>

<div id="dialog" style="display: hidden">Hello world!</div>

<script>
  import { isOpen } from '../store.js';

  // 监听状态的修改并相应地显示（或隐藏）对话框
  isOpen.subscribe(open => {
    if (open) {
      document.getElementById('dialog').style.display = 'block';
    } else {
      document.getElementById('dialog').style.display = 'none';
    }
  })
</script>

资源

贡献社区赞助