Vue 和 Nuxt 的缓冲

Buoy在Vue 3.3和上行,由Vite所建,为β. 它在Nuxt 4也运行. 你的应用程序都保留下来了. Buoy将React用于自己的屏幕并带去. 整个指南是 Vue 页面。 。 。 .

安装并签名

从您的应用程序文件夹中运行这些 :

npm install --save-dev @buoy-gg/core @buoy-gg/vue @buoy-gg/network
npx --package=@buoy-gg/core buoy login

以同样的方式增加更多的工具. 对所有Buoy包使用相同的版本. buoy login 写入 VITE_BUOY_KEY 到文件 Git 忽略.

在Vue 设置

添加 Vite 插件 :

// vite.config.ts
import vue from '@vitejs/plugin-vue';
import { buoy } from '@buoy-gg/core/vite';

export default defineConfig({ plugins: [vue(), buoy()] });

添加Buoy插件到您的应用程序中 :

import { buoy } from '@buoy-gg/vue';

createApp(App).use(router).use(pinia).use(buoy).mount('#app');

就这样. Vite 插件会找到您的工具并添加早期的钩子 . 它让Buoy离开活生生的建筑. app.use(buoy) 读取您的密钥,并在应用程序挂起时启动 Buoy . 它自己发现了Vue路由器,Pinia和Vue Query. 它阻止了Buoy 当你的应用卸载.

在 Nuxt 中设置

// nuxt.config.ts
export default defineNuxtConfig({ modules: ['@buoy-gg/vue/nuxt'] });

就这样. 带入选项 buoy 键,作为简单数据. 对于有功能的选项,设置 buoy: { setup: false }。 。 。 . 那就打电话 nuxtApp.vueApp.use(buoy, options) 在您的客户端插件中.

选项

app.use(buoy, options) 选择与 mountBuoy 从 @buoy-gg/core/web,加上这些:

startBuoy(options) 启动 Buoy 没有 Vue 应用程序 . 过 router, (中文(简体) ), pinia 财务报告和审定财务报表 queryClient 你自己来.

皮尼亚和裁判员

Pinia在Zustand工具中独家存储展出. 显示平地 ref 或者说 reactive,包起来:

import { buoyVueRef } from '@buoy-gg/vue/pinia';

app.use(buoy, { zustandStores: { count: buoyVueRef(count) } });

您可以在工具中读取并编辑它们. 编辑保存您没有更改的字段 .

入境点

每个应用程序条目都有 buoy-disabled 建造它什么也做不了. Vite 插件选中它为 prod 构建 .