?

?conuter.ts

<template><div><!-- 顯示當前的計數 --><p>Count: {{ count }}</<!-- 顯示計算的雙倍計數 --><p>Double Count: {{ doubleCount }}</p><!-- 點擊按鈕以增加計數 --><button @click="increment">Increment</button><!-- 顯示從API獲取的列表項 --><ul><li v-for="item in list" :key="item.id"> {{ item.id }} {{ item.name }} </li></ul></div>
</template><script setup>
import { useCounterStore } from './stores/conuter'; // 導入store
import { storeToRefs } from 'pinia'; // 導入響應式狀態屬性的幫助函數
import { onMounted } from 'vue'; // 導入生命周期鉤子const counterStore = useCounterStore(); // 初始化store// 從store中解構響應式屬性
const { count, doubleCount, list } = storeToRefs(counterStore);
// 從store中解構方法
const { increment, getList } = counterStore;// 組件掛載時獲取列表數據
onMounted(() => {getList();
});
</script>

?App.vue

import { defineStore } from 'pinia'; // 導入Pinia的defineStore函數
import { computed, ref } from 'vue'; // 導入Vue的響應式工具
import axios from 'axios'; // 導入用于HTTP請求的Axiosexport const useCounterStore = defineStore('counter', () => {// 定義一個響應式狀態屬性const count = ref(0);// 定義一個方法來增加計數const increment = () => {count.value++;};// 定義API URLconst APi_URL = 'http://geek.itheima.net/v1_0/channels';// 定義一個響應式狀態屬性來存儲列表const list = ref([]);// 定義一個方法從API獲取列表數據const getList = async () => {const res = await axios.get(APi_URL);list.value = res.data.data.channels;};// 定義一個計算屬性來獲取雙倍的計數const doubleCount = computed(() => count.value * 2);// 返回狀態屬性和方法return {count,increment,doubleCount,list,getList};
});

目錄結構如圖：

運行截圖