//'~/plugins/piniaFetchPlugin.ts',
import { defineNuxtPlugin } from '#app'
import { useRuntimeConfig } from '#imports'
import { PiniaPluginContext } from 'pinia'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.$pinia.use(({ store }: PiniaPluginContext) => {
store.$fetch = async (fetcher: () => Promise<void>) => {
if (process.server) {
await fetcher()
}
}
})
})
使用
<template>
<div>
<p v-if="data">{{ data }}</p>
<p v-else>Loading...</p>
</div>
</template>
<script setup>
import { useExampleStore } from '@/stores/example'
// 获取store实例
const store = useExampleStore()
// 在setup中预取数据
await store.$fetch(store.fetchData)
// 使用store中的数据
const data = store.$state.data
</script>
配置：
plugins: [
'~/plugins/piniaFetchPlugin.ts',
],