NuxtにPiniaをインストールする方法

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。

VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。

Piniaのインストール

Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。

コマンドラインから下記の通りPiniaをインストールします。

yarn add pinia @pinia/nuxt
# or with npm
npm install pinia @pinia/nuxt

npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。

その場合は、package.json:に下記の行を追加して、再度試してみて下さい。

"overrides": { 
  "vue": "latest"
}

次に、NuxtのコンフィグファイルにPiniaを登録します。

// nuxt.config.js
export default defineNuxtConfig({
  // ... other options
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

setup()の外でPiniaを使う場合

Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。

import { useStore } from '~/stores/myStore'

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}

Piniaファイルを作成

ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。

イメージとしてはこのような感じになります。

import { defineStore } from 'pinia'
import { ref } from 'vue';
import EventService from "@/plugins/EventService";
export const useMemberStore = defineStore('member', ()=> {
  const data = ref(null)
  const getData = () => {
    EventService.getMember()
      .then((response) => {
        data.value = response.data;
      })
      .catch((error) => {
        console.log("data:" + error);
      });
  }
  return {
    data,
    getData
  }
})

お疲れ様です。