今日は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 } })
お疲れ様です。