标签: nuxtjs3

有一个用 Vue 2.7 编写的中型应用程序（vuex、vue-router 等）。

直到某个时刻，我们“用自己的双手”拥有了 SSR。工作方式弯曲且缓慢，但有效。

最近，它已经无法满足项目的需求，我们意识到我们将迁移到 Nuxt。

最近，Nuxt 3 发布了。现在处于 rc 状态。我们押注Nuxt的进一步发展。因此，我们希望迁移到版本 3。另外，我认为在不久的将来我们会考虑切换到 TypeScript，并且在 Nuxt 3 中 TS 支持处于良好的水平。

但有一个歧义：Nuxt 3 可以与 Vue 3 配合使用。另外，建议使用 pinia 而不是 Vuex。

对此，提出疑问：

1. 使用 Nuxt 3 时，大多数组件可以在 Vue 2 上运行吗？我也想迁移到 Vue 3，但现在我们希望尽可能加快这个过程。但我也不想使用“Vue 3 Migration Build”这样的拐杖。
2. Pinia 最终会取代 Vuex 吗？我的意思是，Vuex 很快就会过时吗？
3. 也许在搬家之前您应该了解更多陷阱？

我将 Nuxt 3 / Vue 3defineProps与 TypeScript 结合使用，并希望从 TypeScript 类型推断 types prop 类型。

import { User } from '~/types/types'

const props = defineProps({
  users: {
    type: Array, // User[]?
  },
})

在此示例中，如何使usersprop 成为 的类型User[]？

我想在 Nuxt3 的头部标题中加载一个变量。

有人可以解释它是如何工作的吗？

我尝试使用 useHead 和 useAsyncData。（jobData 是 useAsyncData 中的变量，未定义）

useHead({
    title: route.params.job.replace('-', ' '),
    // titleTemplate: "%s - test"
    meta: [
        { name: 'description', content: `${route.params.job.replace('-', ' ')} - Lorem ipsum` },
        { name: 'keywords', content: jobData.value.values.map(x => ` ${x}`) }
    ],
});

谢谢

在我的应用程序初始加载时，我在index.vue. 模板在这里：

<template>

  <div v-for="(season, index) in seasons" :key="index">
    {{ season.attributes.year }} 
  </div>
    
</template>
<script setup>
  const { find } = useStrapi()
  const {  data: seasons } = await find('seasons')
</script>

第一次加载和刷新时的错误是：

Unhandled error during execution of setup function at
<Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

GET http://localhost:3000/ 500 (Internal Server Error)

服务器在 localhost 上响应 500。

在我消除错误并从错误状态重新路由到“/”后，我看到了数据，这是刷新和首次加载问题。

我的猜测是该useStrapi函数必须在 onMounted 或类似的东西上被触发？（但如果可能的话，我希望它由服务器端处理）

这可能也会有帮助。我的nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/strapi'
    ],
    strapi: {
        url: process.env.STRAPI_URL || 'http://localhost:1337',
        prefix: …

Nuxt 3 文档说swr enables a static build, that lasts for a configurable TTL，但是，我无法找到如何更改 TTL 以及是否可以按路由设置它。那可能吗？如果是这样，怎么办？

我查看了 github &\xc2\xa0 也尝试在 Vite / Nitro 文档中找到它，但没有找到任何东西。

我在 Nitro 配置源文件中找到了有关图像 TTL 的内容，但我想这不是我想要的。

因此，在我的数据库中，数据每分钟都会刷新（数据实际上更新，我检查过），然后我在页面上显示这些数据。当我在页面之间切换以及手动刷新页面时，数据会被获取，但如果我坐在一个页面上例如 5 分钟，即使数据库中的数据更新，数据也不会在页面端刷新。

是否可以刷新获取数据（假设用户在页面上处于活动状态时每分钟刷新一次），而无需始终点击刷新按钮？

我使用 useFetch() 获取数据，但我不使用任何其他参数，因为我不需要它们。在文档中特别指出，必须更改参数才能进行刷新工作。

var {data: fixture, refresh, pending, error} = await useFetch('/api/getFixture')``

我尝试过类似的事情：

function refreshing(){
  refresh
  console.log("refreshing")
}
setInterval(() => refreshing(), 10000);

该函数被执行，但数据没有刷新，因为如果我理解正确的话，参数没有变化，对吧？我也尝试使用：

refreshNuxtData()

应该再次“执行”获取，但也没有运气。

感谢你并致以真诚的问候，

例如，我们有 posta api，它可以返回帖子（获取）并创建新帖子（帖子）。

首先我需要将它们放在服务器端。我就是在asyncData选项上这样做的。我使用useFetch可组合来防止$fetch双重数据获取。 https://nuxt.com/docs/api/utils/dollarfetch

好的，我有服务器端获取的发布数据。但现在我希望能够使用options api 方法添加一些数据。

我的函数是否应该带有异步前缀，或者如果我只在客户端使用它，那就不必要了？如果我只想在客户端使用该功能，我应该使用哪种方法来发布一些数据？

export default defineNuxtComponent({
   
    async asyncData () {
        return {
            posts: useFetch ('/api/posts')['data']
        }
    },

   methods:{
    post(event : Event) {
        event.preventDefault();

        // post form data to api

       $fetch('/api/posts',{
            method: 'POST',
            body: JSON.stringify(this.form)
        })
        // this.posts.push(data);

    
    },
}

正在使用

 the $fetch('/api/posts',{
            method: 'POST',
            body: JSON.stringify(this.form)
        }) 

是正确的方法吗？之后我如何刷新客户端的帖子。就像是

axios.post().then(data)=>{this.posts.push(data)} 

在官方文档https://nuxt.com/docs/getting-started/data-fetching中 说：

useFetch、useLazyFetch、useAsyncData 和 useLazyAsyncData 仅在安装或生命周期挂钩期间工作

在 nuxt 模块站点https://axios.nuxtjs.org/中 说： …

我已经查看文档和谷歌搜索很长时间了，由于某种原因，我似乎无法弄清楚如何禁用默认的 Nuxt3 加载指示器。有谁知道如何处理这个问题？

当我刷新“/”路径上的页面时，它只会出现一瞬间，因此页面显示的是index.vue页面。附上图片以供参考。

当通过在配置中提供将应用程序置于非 ssr 模式时ssr: false，nuxt 提供默认的绿色 SVG“山脉”。我知道有一种方法可以在 nuxt 2 中使用一些内置 spinkit 旋转器，但我找不到方法来更改/替换这个 SVG 图形，例如我的徽标。有人可以指出我正确的方向吗？

到处搜索，但代码似乎以某种方式内置

有人已经在 Vue3 中使用过 AOS 或 vue-aos 包吗？

尽管禁用了配置，但我还是收到了一堆错误，可能是由于 ssr （Vue 未定义，文档未定义）所致。

nuxt.config.ts

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/aos', mode: 'client', ssr: false }
  ],
}}

插件/aos.ts

import VueAOS from "vue-aos"

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VueAOS)
})

我尝试了这种方式，我尝试了使用cdn文件的方式（但它导致使用.init（）时未定义AOS并且两者都不起作用。每个关于AOS的教程都与Nuxt2相关。

我还尝试将vue-aos包放在 nuxt 配置上的 build.transpile 上，但没有成功。

多谢