Composeable を使用して Nuxt 3 の Pinia ストアを呼び出す方法を学習します。

Question

nuxt 3.4.0 アップデート以降、コンポーザブルで pinia ストアを使用できなくなりました。

//コンポーズ可能なサンプル
import { useAuthStore } から '~/store/auth-store';
const authStore = useAuthStore();

エクスポート関数 doSomethingWithStore() {
  authStore.checkAuthUser を返します。
}

次のエラーが表示されます

getActivePinia がアクティブな Pinia なしで呼び出されました。pinia のインストールを忘れましたか? const pinia = createPinia() app.use(pinia) これは運用環境では失敗します。 

スタックブリッツの例を表示する https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables/thisBreaks.js,nuxt.config.ts

Answer 1

@pinia/nuxt モジュールを nuxt.config.ts に誤ってインストールしました。 Nuxt 3 では、buildModules 属性はもう存在しないため、代わりに modules を使用する必要があります (TypeScript エラーでわかります):

リーリー

2 番目のポイントは、結合関数内で useAuthStore を呼び出す必要もあります。そうしないと、pinia が実際にロードされる前にストアをロードしようとします。これは、結合関数が使用されるときではなく、ファイルがインポートされるときに呼び出されます。

リーリー

この動作中の stackblitz

を参照してください。

Answer 2

これは、先ほどのように関数の外で const authStore = useAuthStore(); を宣言すると、アプリケーションの起動の初期段階で、Ponia インスタンスを初期化する前に Vue インスタンス内で正しく呼び出されるからです。

これはうまくいきます:

リーリー

Pinia に電話をかけるのが安全な場所 ​​(完全なリストではない可能性があります):

• 内部<スクリプト設定>内部
• <テンプレート>セクションのインライン
• 内 defineNuxtMiddleware内部