difficulty | tags |
---|---|
3 |
pinia, state |
Lorem Ipsum?
Alpha
WEBVTT | |
00:00:04.553 --> 00:00:08.567 | |
Congratulations on completing our course | |
in test-driven development | |
00:00:08.600 --> 00:00:10.600 | |
with Vue and TypeScript. | |
00:00:11.000 --> 00:00:13.267 |
import { ref } from "vue"; | |
export const useFetch = (url) => { | |
const loading = ref(true); | |
const data = ref(null); | |
async function fetchData() { | |
const res = await fetch(url); | |
const d = await res.json(); | |
data.value = d; | |
loading.value = false; |
<script setup> | |
import { ref, computed } from "vue"; | |
import ProductCard from "./components/ProductCard.vue"; | |
import { useFetch } from "./composables/useFetch"; | |
// loading products | |
const { data, loading } = useFetch( | |
"https://dummyjson.com/products?limit=10000" | |
); | |
const products = computed(() => data.value?.products || []); |
{ | |
"tables": [ | |
{ | |
"id": "62757cc0e3b8400009599e54", | |
"name": "Boards", | |
"displayName": "boards", | |
"isSystem": false, | |
"fields": [ | |
{ | |
"id": "62757cc0e3b8400009599e5e", |
dynamic-link-screenshare |
amiralizadeh9480.laravel-extra-intellisense | |
antfu.iconify | |
apollographql.vscode-apollo | |
atlassian.atlascode | |
be5invis.toml | |
bierner.markdown-preview-github-styles | |
bradlc.vscode-tailwindcss | |
buenon.scratchpads | |
csstools.postcss | |
dbaeumer.vscode-eslint |
{ | |
"Vue defineEmits":{ | |
"prefix": "defineEmits", | |
"body" : [ | |
"defineEmits<{", | |
" (e: \"${1:event}\", ${2:payload}: { $3 }): void;", | |
"}>();", | |
], | |
"description": "defineEmits type declaration for Vue.js components" | |
}, |
{ | |
"Pinia Store Boilerplate": { | |
"prefix": "pinia", | |
"body": [ | |
"import { defineStore, acceptHMRUpdate } from \"pinia\";", | |
"", | |
"export const use$TM_FILENAME_BASE = defineStore(\"$TM_FILENAME_BASE\", {", | |
" state: () => {", | |
" return {", | |
" $0", |