在 Astro 组件之间共享状态

在构建 Astro 网站时，你可能需要跨组件共享状态。Astro 建议使用纳米存储来共享客户端存储。

¥When building an Astro website, you may need to share state across components. Astro recommends the use of Nano Stores for shared client storage.

秘诀

¥Recipe

Install Nano Stores:
- npm
- pnpm
- Yarn
Terminal window
npm install nanostores
Terminal window
pnpm add nanostores
Terminal window
yarn add nanostores
Create a store. In this example, the store tracks whether a dialog is open or not:
src/store.js
```
import { atom } from 'nanostores';

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

Import and use the store in a <script> tag in the components that will share state.

The following Button and Dialog components each use the shared isOpen state to control whether a particular <div> is hidden or displayed:

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

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

  // Set the store to true when the button is clicked
  function openDialog() {
    isOpen.set(true);
  }

  // Add an event listener to the button
  document.getElementById('openDialog').addEventListener('click', openDialog);
</script>

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

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

  // Listen to changes in the store, and show/hide the dialog accordingly
  isOpen.subscribe(open => {
    if (open) {
      document.getElementById('dialog').style.display = 'block';
    } else {
      document.getElementById('dialog').style.display = 'none';
    }
  })
</script>

资源

¥Resources