目次

    Piniaとは

    PiniaはVuejs向けのState Management(状態管理)ライブラリです。

    State Managementとはいわばストレージ/ストア(倉庫)のことです、アプリケーション内にStoreという場所を作っておき、そこにコンポーネント間で共有するデータの保存、管理ができるようになります。
    またデータを保存するだけではなくデータを更新することもできます。

    例えばユーザーがログインしたときのトークン、APIでフェッチしたデータ、アプリケーションの状態など、Piniaを使う事でこれらを各コンポーネントやページのどこでも使う事ができるようになります。

    以前はVueのGlobal State ManagementライブラリとしてVuexが有名でしたが、新たにPiniaが登場してからは、Vue公式の状態管理ライブラリとして利用が推奨されています。


    Piniaの特徴

     ・簡単にグローバルなデータ管理を実現できる

    ・記述量が少ないため、スッキリした可読性が高いコードになる

    ・学習コストが低い

    ・Composition APIを意識して実装されてるが、OptionsAPIやVue2でも使える

    ・TypeScriptをフルサポート


    準備

    npmのコマンドでインストールしましょう。

    npm install pinia

    インストールが完了したらmain.jsPiniaを追加します。

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

    const app = createApp(App)
    app.use(createPinia())

    srcフォルダの下にstoresという名前のフォルダを作成します。複数のStoreを作成することができますが、今回はlogin.jsを作成しました。

    Storeを定義するためにpiniaからdefineStoreをimportします。

    stateに共有したい変数を定義し初期値を設定しています。

    defineStore関数の戻り値をuseLoginStoreという名前をつけてexportしています。

    import { defineStore } from 'pinia'

    export const useLoginStore = defineStore('login', {
    state: () => ({
    name: '太郎',
    email: 'sample@test.com',
    })
    },
    })


    次にコンポーネント側です。

    exportした関数をコンポーネントでimportして利用します。

    stateに設定した初期値が表示されるかと思います。

    import { useLoginStore } from '@/stores/login'

    const store = useLoginStore()

    <template>
    <p>名前:{{ store.name }}</p>
        <p>メールアドレス:{{ store.email }}</p>
    </template>


    Storeにデータを保存する

    $patchメソッドを利用するとstateの値を更新することができます。

    <template>
    <button @click='onClick'>Patch</button>
    </template>

    const onClick = () => {
    store.$patch({
    name: '次郎',
    email: 'testtest@test.com'
    });
    }

    追加したPatchボタンをクリックするとstateの中の値が更新され、ブラウザ上の表示も変わります。


    Storeデータのリセット

    $resetメソッドを利用するとstateの値が初期値にリセットされます。コンポーネントにボタンを追加して試してみましょう。

    <template>
    <button @click="store.$reset">Reset</button>
    </template>


    Actions

    login.jmに戻ります。Actionsには、非同期処理を実行する関数を登録できます。

    import axios from 'axios'

    axios.defaults.baseURL = import.meta.env.VITE_APP_API_BASE_URL
    axios.defaults.headers.common = {
    'Content-Type': 'application/json',
    }

    actions: {
    async fetchData(opts, success, error) {
    try {
    const res = await axios.post('/fetch/data', opts)
    success(res.data)
    return
    } catch (err) {
    if (err.response.data && err.response.data.errors) {
    error(err.response.data.errors)
    }
    return
    }
    },
    },

    これでコンポーネントから、先程stateのデータを利用したように、fetchData関数を利用することが可能になります。


    まとめ

    以上になります。いかがだったでしょうか。
    今回はPinia の使い方の中でも基本的なものを紹介しました。
    ぜひ参考にしていただけますと幸いです。

    PREV
    2022.09.13
    JavaScriptのフレームワーク
    NEXT
    2022.10.11
    Javascript にfunctionの使い方