why is my pinia still showing undefined and how can i make my app wait till pinia has loaded before filtering the producst by ID

Question

so here is my vue sfc that is supposed to display a list of products that are sold by a given brand ID, for some reason when i fetch the products and filter them by the brand.id the products array is still undefined

<script setup>
import { useRoute } from 'vue-router'
import { ref, computed } from "vue";
import axios from 'axios'
import { useProductsStore } from "../stores/products";


const store = useProductsStore();
const baseURL = "http://127.0.0.1:8000/"
const route = useRoute()
const id = route.params.id


store.fetchProducts()
const getProductsById = store.getProductsByBrandId

</script>

<template>
    <div class="brandDetails">

        <div>
            <h2>Brand Details</h2>
            ID: {{ id }}
        </div>
        <div>
            <h2>Products</h2>
            <p v-for="product in getProductsById(id)">{{ product.name }}</p>
        </div>
    </div>

</template>

and here is my pinia store.js

import { defineStore } from "pinia";
import axios from "axios";

export const useProductsStore = defineStore("products", {
  state: () => {
    return {
      products: [],
      vendors: [],
      brands: [],
    };
  },

  getters: {
    getProducts: (state) => {
      return state.products;
    },
    getVendors: (state) => {
      return state.vendors;
    },
    getBrands: (state) => {
      return state.brands;
    },
    getProductsByBrandId: (state) => {
      return (id) => state.products.filter((x) => x.brand.id === id);
    },
  },

  actions: {
    async fetchProducts() {
      try {
        const data = await axios.get("http://127.0.0.1:8000/products.json");
        this.products = data.data;
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },
    async fetchVendors() {
      try {
        const data = await axios.get("http://127.0.0.1:8000/vendors.json");
        this.vendors = data.data;
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },
    async fetchBrands() {
      try {
        const data = await axios.get("http://127.0.0.1:8000/brands.json");
        this.brands = data.data;
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },
  },
});

i am not sure what i am doing wrong but i think the problem is that its trying to filter an array which is not yet defined. if so, how can i make sure its defined before filtering it, or maybe there a much better way to do this and im just trippin

any help is appreciated

Answer 1

So here's how I got it working

gonna post it here in case anyone else got stuck on the same thing I did

could be this is something really basic and I should've known, but here it is anyway

brandDetail.vue

<script setup>
import { useRoute } from 'vue-router'
import { ref, reactive } from "vue";
import axios from 'axios'
import { useProductsStore } from "../stores/products";
import Card from 'primevue/card';


const store = useProductsStore();
const baseURL = "http://127.0.0.1:8000/"
const route = useRoute()
const brandId = route.params.id


// get brand details
const brandDeets = ref({
    id: "loading",
    name: "Loading"
})
async function getBrandDeets(id) {
    const link = baseURL + "brands/" + id
    try {
        const data = await axios.get(link)
        brandDeets.value = data.data;
    } catch (error) {
        console.log(error);
    }
};
getBrandDeets(brandId)


// filter producst by brandID
let filteredProducts = reactive([]);
store.fetchProducts()
    .then(() => {
        const prods = store.products.filter(x => x.brand.id == brandId)
        filteredProducts.push(prods)
    })

</script>
<template>
    <div class="branddetails">
        <button @click="$router.go(-1)">Back</button>
        <div>
            <h1>Brand Details</h1>
            <hr>
            <h3>Brand Name: {{ brandDeets.name }}</h3>
            <p>ID: {{ brandId }}</p>
            <br>
        </div>
        <div>
            <h2>{{ brandDeets.name }} Products</h2>
            <hr>
            <div v-if="!filteredProducts[0].length == 0" class="productCardCont">

                <Card v-for="product in filteredProducts[0]" class="productCard">
                    <template #title>{{ product.name }}</template>
                    <template #content>
                        <p>SKU: <router-link :to="'/catalog/' + product.id">{{ product.sku }}</router-link></p>
                        <p>Description: {{ product.description }}</p>
                    </template>
                </Card>
            </div>
            <p v-else>No Products Found</p>
        </div>

    </div>
</template>

Major thanks to everyone who helped me out!