Vue.jsでの関数切り出しとPiniaエラーの回避方法

■はじめに

　Vue.jsを学習中のエンジニアです👩🏻‍💻
今回は、関数をmodulesに切り出す際のPiniaに関するエラーについて記事を書こうと思います。
同じように困っている方の助けになればと思います☺️

※この記事ではPiniaのStoreの知識があることを前提で記事を記載していますので、ご了承ください。

■前提条件

• フロント：Vue.js,TypeScriptを使用
• Store使用
• 関数切り出しを行うためにsrc/modulesフォルダにファイルを作成して関数切り出し

■エラーが起きた事象

addNumbers関数、multiplyNumbers関数をmodulesフォルダのCalculationFunctions.tsファイルに切り出しました！

.store/useCalculationStore.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCalculationStore = defineStore('calculation', () => {
  const numberA = ref<number>(2)
  const numberB = ref<number>(3)

  return {
    numberA,
    numberB
  }
})

.modules/CalculationFunctions.ts

import { storeToRefs } from 'pinia'
import { useCalculationStore } from '@/store/useCalculationStore'

const { numberA, numberB } = storeToRefs(useCalculationStore())

export const addNumbers = (): number => {
  return numberA.value + numberB.value
}

export const multiplyNumbers = (): number => {
  return numberA.value * numberB.value
}

結果以下のエラーがコンソールに表示されるようになりました🤔

このメッセージは、getActivePiniaという関数が呼び出されたが、アクティブなPiniaインスタンスが存在しないということを示しています。

pinia.js?v=77070775:1355 Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.
    at useStore (pinia.js?v=77070775:1355:13)
    at CalculationFunctions.ts:4:42

■エラー原因

Vueコンポーネント外でのストアの使用

• PiniaのStoreは、Vueのライフサイクルに依存しているため、コンポーネント外で直接使用するとVue初期化が完了していないタイミングでストアが使用される可能性があります。
  その結果、Storeのインスタンスが存在しない状態でStoreなどの関数を呼び出すとエラーになります。

VueのアプリケーションとPiniaの初期化

通常、Vueアプリケーションでは以下のようにしてPiniaを初期化し、Vueのアプリケーションインスタンスに組み込んで使用します。

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

しかし、Vueコンポーネント外でStoreを使用する場合、この初期化の文脈が失われるため、エラーが発生します。

■解決方法

関数内でStoreから定義された変数や状態を呼び出すように変更する

以下のように関数内で必要な変数等をStoreから呼び出すことで解決しました！

CalculationFunctions.ts

import { storeToRefs } from 'pinia'
import { useCalculationStore } from '@/store/useCalculationStore'

export const addNumbers = (): number => {
  const { numberA, numberB } = storeToRefs(useCalculationStore())
  return numberA.value + numberB.value
}

export const multiplyNumbers = (): number => {
  const { numberA, numberB } = storeToRefs(useCalculationStore())
  return numberA.value * numberB.value
}

■おわりに

　ここまで読んでいただきありがとうございます🙇🏻‍♀️今回のエラーの原因と解決方法を共有することで、同じような問題に直面している方の参考になれば幸いです。関数の切り出しやStoreの使用に関して、引き続き学んでいきたいと思います。