无法使用 NuxtJs 读取未定义的属性（读取“格式”）

Question

我对 momentjs 和 NuxtJS 有这个问题

我创建了带有 javascript 的可组合项，以获取世界不同地方的当前时间。

我已经创建了一个组件以在不同页面中使用。

当我尝试使用组件内部的组合时，我收到错误未定义的红色格式。

这是我的可组合项：

import moment from 'moment-timezone';

export function useOrologio(paese) {
  
  const citta = ref(moment())
  setInterval(() => { citta.value = moment().tz(paese).format('H:mm:s dddd MMM D')},1000);
  const utc = ref(moment().tz(paese).format('Z')) 
  const local = ref( moment().tz(paese).format('z'))

 moment.updateLocale('it', {
   weekdays : [
       "Lunedì", "Martedì", "Marcoledì","giovedì", "Venerdì", "Sabato", "Domenica"
   ]})

   return {citta , utc , local}
}

这是我的组件

<template>
    <div class="flex flex-row p-5 font-[Kenit] font-[600] text-slate-800">
       <div class="text-3xl border-slate-900 rounded-2xl p-5 bg-slate-200 w-4/12 flex flex-col">

        <p>{{ title }}</p>
   
       <p>{{ citta }}</p>
       <div class="text-base">
       <p>Ore rispetto a Greenwich {{ utc }}</p>
        </div>
   </div>
   </div>
   </template>
   
<script setup>
import { useOrologio } from '~/composable/orologio';

const {citta} = useOrologio()

const { props } = defineProps([
'title'
])

</script>

Answer 1

您的可组合性很好。 您只是忘记在组件中向 useOrologio 传递参数。 例如：

const { citta, utc } = useOrologio('America/Los_Angeles')

您的新组件应如下所示：

    <template>
  <div class="flex flex-row p-5 font-[Kenit] font-[600] text-slate-800">
    <div class="text-3xl border-slate-900 rounded-2xl p-5 bg-slate-200 w-4/12 flex flex-col">
      <p>{{ title }}</p>

      <p>{{ citta }}</p>
      <div class="text-base">
        <p>Ore rispetto a Greenwich {{ utc }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useOrologio } from './composable/orologio'

const { citta, utc } = useOrologio('America/Los_Angeles')

const { props } = defineProps(['title'])
</script>