在构建 Astro 网站时,你可能需要在组件之间共享状态。Astro 推荐使用 Nano Stores 来进行客户端的存储共享。
npm install nanostores
pnpm add nanostores
yarn add nanostores
import { atom } from 'nanostores'; export const isOpen = atom(false);
<script>
如下的 Button and Dialog 组件分别使用了共享的 isOpen 状态来控制特定的 <div> 元素是否隐藏或显示:
Button
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>
向我们的团队发出问题警报的最快方法。
直接给我们发送消息。
感谢!我们收到了你的反馈。