Vue中使用Watch监听Store变化时Await语法报错的问题求助

错误原因 #

await 关键字只能在async标记的函数内部使用，你当前的watch回调函数未声明为async，导致编译报错。同时，回调里的局部data变量无法直接在模板中使用，需要转为响应式变量。

修正后的完整代码 #

<script setup>
import { useAppStore } from '~/store/app';
import { ref } from 'vue';

const appStore = useAppStore();
const supabase = useSupabaseClient();

// 声明响应式变量，用于存储查询结果，模板可直接访问
const productData = ref(null);

watch(
  () => appStore.storeID,
  async () => { // 给回调添加async关键字，允许使用await
    if (appStore.storeID > 0) {
      // 补全Supabase查询的eq条件参数，指定匹配的storeID值
      const { data } = await supabase
        .from('productinfo_testv12')
        .select('*')
        .eq('id', appStore.storeID);
      
      // 将查询结果赋值给响应式变量，模板会自动更新
      productData.value = data;
    }
  },
  // 可选：添加immediate，组件初始化时就执行一次查询（若storeID初始值大于0）
  { immediate: true }
);
</script>

<template>
  <div v-if="productData">
    <div v-for="product in productData" :key="product.id">
      {{ product.name }} <!-- 示例：展示产品名称，根据实际字段调整 -->
    </div>
  </div>
  <div v-else>暂无产品数据</div>
</template>

关键修改说明 #

• 用ref创建productData响应式变量，确保数据变化时模板自动更新
• 给watch回调函数添加async关键字，解决await的编译错误
• 补全Supabase查询的eq('id', appStore.storeID)参数，否则查询条件不完整无法返回正确结果
• 可选的immediate: true配置：如果组件初始化时storeID已经大于0，会立即执行一次查询

内容的提问来源于stack exchange，提问作者Anthony Vasquez