把 Supabase 塞进 Vue 项目其实没那么麻烦

之前在 Vue 项目里接 Supabase 总是得手动建个 client 实例，然后想在不同组件里用还得传来传去，或者搞个全局单例，写起来挺啰嗦的。后来发现 @supabase-community/vue-supabase 这个包把这事儿给简化了，直接用一个 hook 就能拿 client，不用再自己写那些重复的初始化代码。

简单来说，它就是给 Supabase 套了个 Vue 的壳，让你能用 useSupabaseClient() 快速调用，但底层的 API 还是原汁原味的 Supabase，完全没有学习成本。

一、 怎么快速跑起来

先安装这个社区包：

npm install @supabase-community/vue-supabase

然后在 .env 文件里把你的项目 URL 和 Anon Key 填好：

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-publishable-key

在代码里初始化的时候，直接把环境变量传进去就行：

import { useSupabaseClient } from '@supabase-community/vue-supabase'

const supabase = useSupabaseClient({
  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
})

二、 实操一下数据库查询

最舒服的地方在于，拿到 client 之后，所有的操作逻辑跟官方 JS SDK 一模一样。比如我想从 profiles 表里查几个活跃用户，直接这么写：

<script setup>
import { useSupabaseClient } from '@supabase-community/vue-supabase'

const supabase = useSupabaseClient()

// 像平时一样用 .from().select()，没任何区别
const { data, error } = await supabase
  .from('profiles')
  .select('id, name')
  .eq('active', true)
  .order('name')
</script>

三、 关于 TypeScript 的强类型坑

如果你项目大了，不用 TS 简直是噩梦。Supabase 最强的地方在于能直接根据数据库 Schema 生成类型定义，千万别手写接口。

你可以运行这个命令把类型导出来：

npx supabase gen types typescript --project-id your-project-id --schema public > src/types/supabase.ts

拿到这个 supabase.ts 之后，在调用 client 时把类型传进去，这样你在写 .from('table_name') 的时候，字段名会有自动补全，而且如果字段写错了，编辑器直接标红，省去了大量去数据库对字段名的时间。