0

nuxt2で開発しているプロジェクトをnuxt3に移行したいと思っています。
nuxt2の下記のような実装は、nuxt3ではどのような実装に対応するのでしょうか?
<script setup lang="ts"> や vue3 の composition API を導入した形式で実装したいと考えています。

pagex/index.vue

<script lang="ts">
import HogeComponent from '~/path/to/component'
@Component({
  components: {
    HogeComponent
  },
  async fetch(context: Context) {
    const { store, query, error } = context
    await store.dispatch('myStore/someImpl').catch()
  }
}

export default class Index extends Vue {
  created(): void { }
  get xxx(): boolean { }
  get yyy(): string { }
  setLoading() { }
  async change(arg: string) { }
}
</script>

1 件の回答 1

2

nuxt 3 をしばらく触っていないのですが、多分以下の感じになる気がしています。

<script setup lang="ts" >

// 勝手に template で使えるようになる。
// ~/components に入れている場合は、 global 登録されるので不要になる。
import HogeComponent from '~/path/to/component';

// nuxt 3 で global store がほしい場合は、おそらく pinia を使うはず
// ~/composables につっこんでおくと、同様にこの import は不要になる気がする。
import useSomeStore from '~/path/to/composable';


// created でやってたこともここで基本的には書ける。はず。

const someStore = useSomeStore()
await useAsyncData('someKey', () => {
  await someStore.someAction
})

const xxx = computed(() => {
  // reactive オブジェクトを参照して値を計算
})
const yyy = computed(() => {
  // reactive オブジェクトを参照して値を計算
})

// method は普通に定義する。
const setLoading = () => {
  // reactive な変数の設定したりしたいはず。
}

// async method も同様。
const change = async (arg: string) => {
}
</script>

script setup で定義された値は template の方で利用可能になっていきます。
reactivity を意識した、記述をしていくことになります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。