目標
在Day5做了資料的建立
在Day6、Day7做了Supabase的註冊和資料匯入介紹
這邊要開始把Supabase的資料取回來
顯示在活動一覽的組件上

步驟

在src/ 建立supabase.js(命名隨意 只要能引入就好)
由於要連到supabase
所以我們需要連接API的URL與API的KEY
我們回到Supabase控制台
前往下圖的Project Setting

下圖紅框1和2分別是API的URL
與API的KEY 記下這兩個資料

supabase.js 程式架構如下

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = "你的API的URL";
const supabaseKey = "你的API的Key";

export const supabase = createClient(supabaseUrl, supabaseKey);

再來回到B-Aaction組件
這邊我們要用引入Supabase取資料
script程式架構如下

<script setup>
import { ref, onMounted } from "vue";
import { supabase } from "../supabase.js";

const actionList = ref([]);

onMounted(async () => {
  const { data, error } = await supabase
    .from("action")
	.select("*")

  if (error) {
    console.error(error);
  } else {
    actionList.value = data;
  }
});
</script>

template程式架構則是

<template>
<div>B區塊
{{actionList}}
</div>
</template>

因為畫面會即時變動 我們回到畫面
但卻只看到B組件 只有空陣列的資料
那是因為Supabase在創建資料表時
讀取權限預設是關閉的 我們要另外做設定

回到Supabase
進入Database底下的Policies
我們在action這個資料表右上角按下create policy
接著依照紅框操作

按下Save後，回來畫面
我們就能看到資料成功抓取回來了

備註
這邊讀取資料的行為會被包在onMounted裡
以下依序做說明
1.指定組件載入後會做的事
2.做讀取Supabase的事
3.取Action資料表的資料
語法等同於

select * from action;