使用示例

本节目标：理解“使用示例”的核心思路，并能把它用于实际开发或面试表达。 import { ref, onMounted } from "vue"; import { defineStore } from "pinia"; import { fetchDistricts } from "@/services/api"; export const useChangshaDistrictStore = defineStore( "changshaDistrict", (shouldFetchOnMounted = true) => { const districts = ref([]); const isLoading = ref(false); async function fetchDistrictData() { isLoading.value = true; try { const data = await fetchDistricts(); districts.value = data; } catch (error) { console.error("Failed to fetch districts:", error); } finally { isLoading.value = false; } } if (shouldFetchOnMounted) { onMounted(fetchDistrictData); } return { districts, isLoading, fetchDistrictData, }; } );

这样，在使用store时，你可以选择是否在组件挂载时自动发起请求： / 在组件中 import { useChangshaDistrictStore } from "@/stores/changshaDistrictStore"; // 默认会在组件挂载时发起请求 const districtStore = useChangshaDistrictStore(); // 或者，如果你不想在组件挂载时自动发起请求 const districtStoreWithoutAutoFetch = useChangshaDistrictStore(false); 这种方法提供了一个灵活的机制，允许你根据具体的需求来控制数据获取的时机。