SupabaseとNuxt.jsが接続されない

実現したいこと

SupabaseとNuxt.jsが接続すること

発生している問題・エラーメッセージ

SupabaseとNuxt.jsが接続されず、何も表示されません。
現在はtodosテーブルの表示だけ試しています。

@supabase/supabase-jsを利用しています。
原因が分かれば教えて頂きたいです。

エラー画面

ℹ Waiting for file changes 14:41:19 ℹ Memory usage: 550 MB (RSS: 625 MB) 14:41:19 ℹ Listening on: http://localhost:3000/ 14:41:19 No issues found. 14:41:19 WARN Classic mode for store/ is deprecated and will be removed in Nuxt 3. 14:41:20 ERROR [vuex] unknown action type: todos/fetchTodos

該当のソースコード

JavaScript

1#pages/index.vue2<template>3 <div>4 <h1>Todoリスト</h1>5 <ul v-if="todos">6 <li v-for="todo in todos" :key="todo.id">7 {{ todo.title }}8 </li>9 </ul>10 <p v-else>データを取得できませんでした。</p>11 </div>12</template>13 14<script>15export default {16 async asyncData({ store }) {17 try {18 await store.dispatch("todos/fetchTodos");19 return {20 todos: store.state.todos.todos || null,21 };22 } catch (error) {23 console.error(error);24 return {25 todos: [],26 };27 }28 },29};30</script>

JavaScript

1store/todos.js2 3import { createClient } from "@supabase/supabase-js";4 5 6const supabaseUrl = process.env.SUPABASE_URL;7const supabaseKey = process.env.SUPABASE_KEY;8const supabase = createClient(supabaseUrl, supabaseKey);9 10export const state = () => ({11 todos: [],12});13 14export const mutations = {15 setTodos(state, todos) {16 state.todos = todos;17 },18};19 20export const actions = {21 async fetchTodos({ commit }) {22 const { data } = await supabase.from("todos").select("*");23 commit("setTodos", data);24 },25};26 27export const getters = {28 getTodos: (state) => {29 return state.todos;30 },31};

.env

SUPABASE_URL = "" SUPABASE_KEY = ""

試したこと

環境変数の設定の見直し

補足情報（FW/ツールのバージョンなど）

https://github.com/takoyan33/vuejs-app-front