如何在应用程序启动时在 Nuxt 3 应用程序中获取数据并保留该数据？

Question

在 Nuxt 2 中，我在 Vuex 商店的索引文件中使用了

nuxtServerInit()

方法来分派一个商店操作，该操作从 API 检索数据并将其提交给商店。

如何在 Nuxt 3 中实现相同的目标？

目前我已经安装了 pinia 和一个简单的商店设置：

import { defineStore } from 'pinia'

export const usePersonalisationStore = defineStore({

  id: 'personalisation-store',

  state: () => {
    return {
      data: null,
    }
  },

  actions: {

    async setData (id) {

      if ( ! id) return

      this.data = {
        'someApp': {
          id: id
        }
      }

    }
  },

  getters: {
    practiceData: state => state.data,
  },

})

还有以下插件

personalisation.server.js

：

import { usePersonalisationStore } from "~/store/personalisation";

export default defineNuxtPlugin((nuxtApp) => {

  const store = usePersonalisationStore()
  const route = useRoute()
  const { setData } = store

  setData(route.query.id)

})

这只是查看路由查询字符串并更新商店。我想在这里做的是进行异步 API 调用以获取数据，然后用数据更新存储。

Answer 1

您正在寻找运行时生命周期挂钩。你的钩子可能是

app:created

，所以：

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:created', () => {
        /* data fetching here */
     })
})

Answer 2

“这只是查看路由查询字符串并更新商店。我想在这里做的是进行异步 API 调用以获取数据，然后用数据更新商店。”

不清楚你想在那里做什么，但我会试一试。

如果你想做的是有一个插件来获取数据，你需要为 NuxtApp 提供一个帮助程序来使用你的插件中的数据：

export default defineNuxtPlugin(() => {
  // fetch data here
  return {
    provide: {
      fetchedData: data
    }
  }
})

如https://nuxt.com/docs/guide/directory-structure/plugins所述

否则，如果您只是想在应用程序创建时获取数据，并将其保存在 pinia 状态，您可以只使用 app.vue 中的设置挂钩。如果你没有 app.vue，只需在你的根目录中创建它，Nuxt 将使用它的指令来覆盖由 Nuxt 实例化的默认 Vue 应用程序。

在 app.vue 中

<template>
    <!-- your app -->
<template/>
<script setup>
    import { usePersonalisationStore } from "~/store/personalisation";
    <!-- await fetch data here from pinia -->
    const store = usePersonalisationStore();
    await store.fetchData()
    <!-- data is now set and usable -->
    const fetchedData = computed(() => { return store.getFetchedData });
</script>

在 ~/store/personalisation.js 中

import { defineStore } from 'pinia'

export const usePersonalisationStore = defineStore({

  id: 'personalisation-store',

  state: () => {
    return {
      data: null,
      fetchedData: null
    }
  },

  actions: {

    async setData (id) {

      if ( ! id) return

      this.data = {
        'someApp': {
          id: id
        }
      }

    },
    async fetchData() {
        const data = await useFetch('URI');
        this.fetchedData = data;
    }
  },

  getters: {
    practiceData: state => state.data,
    getFetchedData() { return this.fetchedData }
  },

})

这些概念记录在https://nuxt.com/docs/getting-started/data-fetching、https://nuxt.com/docs/migration/pages-and-layouts#appvue和 https://pinia.vuejs.org/core-concepts/state.html