In my Vue application, I have a product list and form. When the product list is displayed, it triggers a request to my REST API which then populates the results in a Pinia store object called products
. This process works smoothly and the products are successfully added to the state.
Initially, I was using my API to fetch a single product by passing the product_id
, especially for handling the product form. However, I realized that it would be more efficient to filter the existing products
store object and retrieve the single product from the state rather than making another API call whenever the form component loads. To achieve this, I created a new action but unfortunately, I am struggling to get it to work properly. Below is how I defined my store with the action:
//ProductStore.js
import { defineStore } from "pinia";
import { getProducts } from "@/composables/products";
export const useProductStore = defineStore("product", {
state: () => ({
products: [], //for my products list component
product: {}, //for my product form component
attributes: [],
loading: false,
error: "",
}),
actions: {
findProduct(id) { //find single product in store
this.product = this.products.find((product) => product.id === id);
},
async fetchProducts() { // retrieve all products from api
this.loading = true;
const { products, error } = await getProducts(); //api call
this.products = products;
this.error = error;
this.loading = false;
},
}
});
Here is the code snippet of my product form component where I attempt to filter the products
store to obtain a single product
and bind it with the form:
// ProductForm.vue
<template>
<input v-model="product.name" class="input" type="text" />
<input v-model="product.desc" class="input" type="text" />
</template>
<script setup>
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useProductStore } from "@/stores/ProductStore";
const props = defineProps({
id: String,
});
const store = useProductStore();
const { product, error, loading } = storeToRefs(store);
onMounted(() => {
store.findProduct(props.id);
console.log(product);
});
</script>
On inspecting the console.log(product)
, it seems like I am getting the reference to the product store object without the value property:
https://i.sstatic.net/qhl6I.png
Running all this code results in an error:
Uncaught (in promise) TypeError: $setup.product is undefined
I acknowledge that my struggle stems from my limited knowledge of Vue 3 Composition API and Pinia. I am currently unable to figure out what exactly is causing this issue.