使用 Vue + Supabase 实现实时订阅
嘿，如果你不知道我在说什么，你应该点击这个链接阅读我的第一篇文章。
语境：
我们使用Vue和Supabase （一个开源的 Firebase 替代方案）创建了一个微博平台。今天，我们将展示数据库中每新增一条微博时，该微博都会被显示出来。
我们的起点是上一篇文章中创建的代码，您可以访问存储库查看源代码。
我们的 Git 主分支名为 `<main_branch_name>` main，我们将从中创建一个名为 `<branch_name>` 的分支feat/add-subscription（您可以在这里访问它），我们可以使用以下命令行命令来完成此操作：
// git clone git@github.com:ftonato/vue-supabase-microblog.git
// cd vue-supabase-microblog
git checkout -b feat/add-subscription
通过浏览文档，我们可以详细了解订阅方式。
订阅就像实时监控数据库中的变化。这意味着每次发生事件（例如INSERT，UPDATE更新、DELETE删除等*）时，我们都可以触发一个函数。
例如：
const mySubscription = supabase
.from('*')
.on('*', payload => {
console.log('Change received!', payload)
})
.subscribe()
在上面的示例中，我们告诉应用程序：“无论何时发生事件，无论表格是什么，都使用console.log.
我们的做法与示例类似，但有两个细节不同：
- 我们只会从一张桌子观看（
posts）。 - 我们只想在
INSERT现场观看比赛。
在我们的List.vue文件中，我们将创建一个名为 的新变量subscriptionPosts和一个 方法subscribePosts。
我们将在组装mounted组件时调用此方法，其职责如下：
- 每当向此表中插入一条新记录时，将其添加到
posts变量（存储出版物的本地变量）中。
以下是我们的实现代码：
<template>
<section class="px-2 pt-16 pb-6 bg-white md:px-0">
<div class="container items-center max-w-6xl px-8 mx-auto xl:px-5">
<template v-for="(post, index) in posts">
<list-item
:key="`post-${index}`"
:id="post.id"
:title="post.title"
:description="post.description"
/>
</template>
</div>
</section>
</template>
<script>
import ListItem from "./ListItem";
import DatabaseService from "../Database.service";
export default {
name: "List",
components: {
ListItem,
},
data: () => ({
posts: [],
database: null,
subscriptionPosts: undefined,
}),
created() {
const database = new DatabaseService();
this.database = database.getInstance();
},
async mounted() {
await this.fetchPosts();
this.subscribePosts();
},
methods: {
async fetchPosts() {
let { error, data } = await this.database
.from("posts")
.select()
.order("id");
if (error) {
console.error(error);
return;
}
this.setPosts(data);
},
setPosts(posts) {
this.posts = posts;
},
subscribePosts() {
this.subscriptionPosts = this.database
.from("posts")
.on("INSERT", (message) => {
if (message.new) {
this.posts.push(message.new);
}
})
.subscribe();
},
},
};
</script>
这是实现实时订阅所需的代码。
你准备好看到结果了吗？
绝对精彩！
上面所做的已经足够了，但是让我们稍微注意一下我们的应用程序，并在destroyed组件的拆卸过程中删除订阅（）。
当订阅流中的新值不再需要或无关紧要时，请务必取消订阅，这样可以大大减少触发次数，并在某些情况下提高性能。
我们创建了一个名为 ` unsubscribePostsremove the subscription` 的方法。
<template>
<section class="px-2 pt-16 pb-6 bg-white md:px-0">
<div class="container items-center max-w-6xl px-8 mx-auto xl:px-5">
<template v-for="(post, index) in posts">
<list-item
:key="`post-${index}`"
:id="post.id"
:title="post.title"
:description="post.description"
/>
</template>
</div>
</section>
</template>
<script>
import ListItem from "./ListItem";
import DatabaseService from "../Database.service";
export default {
name: "List",
components: {
ListItem,
},
data: () => ({
posts: [],
database: null,
subscriptionPosts: undefined,
}),
created() {
const database = new DatabaseService();
this.database = database.getInstance();
},
async mounted() {
await this.fetchPosts();
this.subscribePosts();
},
destroyed() {
this.unsubscribePosts();
},
methods: {
async fetchPosts() {
let { error, data } = await this.database
.from("posts")
.select()
.order("id");
if (error) {
console.error(error);
return;
}
this.setPosts(data);
},
setPosts(posts) {
this.posts = posts;
},
subscribePosts() {
this.subscriptionPosts = this.database
.from("posts")
.on("INSERT", (message) => {
if (message.new) {
this.posts.push(message.new);
}
})
.subscribe();
},
unsubscribePosts() {
this.database.removeSubscription(this.subscriptionPosts);
},
},
};
</script>
就到这里啦！
想想这能给应用程序带来多大的力量，正如我在上一篇文章中所说：让你的想象力引导你，探索新的领域。
如果您对我们创建的项目的源代码感兴趣，请访问 GitHub 上的项目目录，并实现更多令人兴奋的功能，例如：
如有任何疑问，请随时联系我（ademilsonft@outlook.com / @ftonato或Supabase 团队）。
文章来源：https://dev.to/ftonato/realtime-subscriptions-using-vue-supabase-1e11