Nuxt3のsetup内ではthisの代わりにuseNuxtApp()を使用する
  • 2022.03.09に公開
  • Nuxt3
  • 0. Nuxt3
  • No.2 / 9
現在このカテゴリーは、Nuxt3パブリックベータ版の情報を公開しています。変更の可能性が大きくあるので、最新の情報は Nuxt3の公式サイト をご確認ください。

Nuxt3のsetup内ではthisが参照できない

Nuxt3のsetup内ではthisが参照できません。

<script setup lang="ts">
  console.log(this)
</script>

<!-- console -->
undefined

その代わりに、useNuxtApp()を使用してNuxtインスタンスにアクセスします。

<script setup lang="ts">
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp)
</script>

<!-- console -->
callHook: ƒ ()
globalName: "nuxt"
hook: ƒ ()
hooks: Hookable {_hooks: {…}, _deprecatedHooks: {…}, hook: ƒ, callHook: ƒ, callHookWith: ƒ}
isHydrating: false
payload: Proxy {data: {…}, state: {…}, _errors: {…}, serverRendered: true, config: {…}}
provide: (name, value) => {…}
vueApp: {_uid: 0, _component: {…}, _props: null, _container: div#__nuxt, _context: {…}, …}
$config: (...)
$router: (...)
...

useNuxtApp()とは

Nuxtインスタンスにアクセスするための関数です。Nuxt2のコンテキストと同等の扱いです。

コンポーザブル、コンポーネント、プラグイン内のランタイムアプリコンテキストにアクセスできます。useNuxtApp(サーバーサイド)は、setup、Nuxtプラグインまたはライフサイクル Hooks内部でのみ機能します。

引用: Nuxt 3 - NuxtApp

useNuxtApp()を使用すればprovideで登録した値を呼び出すことができます。

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // Prints "Hello name!"

provideとは

provideはコンポーネントのインスタンスに任意の値を設定できるVue3の機能です。

Vue3では、provideで登録した値はinjectを使用して呼び出します。

Nuxt3の場合は、

  • useNuxtApp().provide('呼出キー', <値 or 関数 or クラス>)で登録し、
  • useNuxtApp().$<呼出キー>で参照します。

provideをプラグインファイルで使用する際の書き方はこの記事が参考になります。

Nuxt3の新しい機能 - Zenn

provideでページを跨いだ値の参照

provideを使用してNuxtインスタンスに登録すれば、ページを跨いだ値の参照も可能です。

pages/index.vue
<!-- pages/index.vue -->
<script setup lang="ts">
  // Nuxtインスタンスに登録
  useNuxtApp().provide('hoge', 'Hello')
</script>

<!-- pages/test.vue -->
<script setup lang="ts">
  // Nuxtインスタンスから呼び出し
  console.log(useNuxtApp().$hoge)
</script>

<!-- console -->
Hello

Nuxt2ではinject関数を使用して上記機能を実現していました。

Nuxt2のinjectで登録したクラスをNuxt3で参照する

例えばECサイトのShopifyを扱うnuxt-shopifyモジュールは、Nuxt2のinjectを使用し、インスタンスにクラスを登録しています。

node_modules/nuxt-shopify/lib/plugin.js
// Inject shopify to the context as $shopify
export default (ctx, inject) => {
  ctx.$shopify = client;
  inject('shopify', client);
});

Nuxt2のinject参照方法

injectを使用して登録したクラスは、Nuxtコンテキストやthisからそのクラスを参照できます。

asyncData
// Nuxtコンテキストから参照
async asyncData({ $shopify, params }) {
  const product = await $shopify.product.fetch(params.id);
  return { product };
}
methods/ created/ mounted/ etc
// thisから参照
methods: {
  async fetchProduct(productId) {
    this.product = await this.$shopify.product.fetch(productId);
  }
}

引用: Components - Nuxt Shopify

Nuxt3のinject参照方法

Nuxt3ではuseNuxtApp()を使用してinjectで登録したクラス関数にアクセスします。

<script setup lang="ts">
  const nuxtApp = useNuxtApp()
  const products = await nuxtApp.$shopify.product.fetchAll()
</script>
あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。