Watch for Store to change with If statement and Await

Question

I am using an watch to check if appStore.storeID has changed, if it does change and the value is greater than zero it should trigger a Supabase database Fetch.

<script setup>
//import Store Data
import { useAppStore } from '~/store/app';

//set Store as a Constant
const appStore = useAppStore();

const supabase = useSupabaseClient();

watch(
  () => appStore.storeID,
  () => {
    if (appStore.storeID > 0) {
      const { data } = await supabase
        .from('productinfo_testv12')
        .select('*')
        .eq('id');
    }
  }
);
</script>

I am getting this error back

[@vue/compiler-sfc] Unexpected reserved word 'await'. (14:23)

I am expecting this to return a const {data} that can be used within the template.

It needs to be inside an async function – Daniel A. White Apr 02 '23 at 00:58 — Daniel A. White, Apr 02 '23 at 00:58

Anthony Vasquez · Answer 1 · 2023-04-02T02:35:13.557

Was able to achieve desired results with the following, using @user1854438 help.

Storing {data} as a store to be able to access inside template and outside of the block.

<script setup>
//import Store Data
import { useAppStore } from '~/store/app';

//set Store as a Constant
const appStore = useAppStore();

const supabase = useSupabaseClient();

watch(
  () => appStore.storeID,
  async () => {
    // added async keyword here
    if (appStore.storeID > 0) {
      const { data } = await supabase
        .from('productinfo_testv12')
        .select('*')
        .eq('id', appStore.storeID); // added the value of storeID to the query
      appStore.updateDataID(data);
    }
  }
);
</script>

Watch for Store to change with If statement and Await

1 Answers1