Есть стор pinia
import { defineStore } from "pinia";
import axios, { AxiosError } from "axios";
import { ref } from "vue";
export interface IPizza {
id: number;
imageUrl: string;
title: string;
types: number[];
sizes: number[];
price: number;
category: number;
rating: number;
}
export const usePizzaStore = defineStore("usePizzaStore", () => {
let loading = ref<boolean>(true);
let data = ref<IPizza[] | null>(null);
let error = ref<AxiosError | null>(null);
async function fetchData(url: string): Promise<void> {
await axios
.get(url)
.then((response) => {
data.value = response.data;
})
.catch((e: AxiosError) => {
error.value = e;
})
.finally(() => {
loading.value = false;
});
}
return { fetchData, loading, data, error };
});
И компонент
<script setup lang="ts">
import { onMounted } from "vue";
import { usePizzaStore } from "src/entities/pizza";
const store = usePizzaStore();
const { data, fetchData } = store;
onMounted(() => {
fetchData("http://localhost:3000/pizzas");
console.log("mount");
console.log(data); // null
});
</script>
<template>
<p class="font-bold text-[32px]">Все пиццы</p>
<div class="">
<div class="" v-for="pizza in data" :key="pizza.id">
{{ pizza.price }}
</div>
</div>
</template>
Я хочю чтоб при монтировании компонента я мог взять data и на его основе отрисовать список, но он равен null. При этом во vue devtools видно, что data заполнен.
