Pinia(ピーニャ)を知ると世界が平和に？

現在案件で使用しているPinia（ピーニャ）がすごい！と個人的に話題なので
どんなものか簡単に紹介してみようと思います〜！
<br>
## Pinia（ピーニャ）とは
📌[公式ドキュメント](https://pinia.vuejs.org/)
📌[GitHub](https://github.com/vuejs/pinia)


PiniaはVuexの次世代版とも言える、Vue.js向けの状態管理ライブラリです🍍
（スペイン語でパイナップルという意味らしいです）

複数のコンポーネント間で共有したいデータを、一元的に管理することができます。

![スクリーンショット 2022-12-10 3.00.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1534321/813ffc12-cdd5-5d40-119f-e5dc57013387.png)
なんでも、Composition APIを使用してStoreがどのように表示されるかを
Vuexの代わりとして実験してみたところから生まれたそう！（公式ドキュメントより）

2021年末には、Vue.js公式ではVuexからPiniaが推奨されるようになりました🍍
（時期的にも``Vue2/Vuex`` → ``Vue3/Pinia``という組み合わせに移り変わった印象）


Vuexと同様にコンポーネント間で状態の受け渡しが簡単になるだけでなく、
mutationsが廃止されているため、Vuexより単純明快に書けるのが特徴です＾＾
<br>

:::note info
将来的にはVuex5に統合される、なんて話もあるようです
:::

## Piniaのいいところ

個人的な印象では、良さを感じることが大半だと思います！
私はVuexを本格的に使用する前にPiniaを知ってしまったので
比較が難しかったのですが、公式ドキュメントを参考にいくつか挙げてみました！
<br>
#### 記述量が少ない

見た目の整ったStoreを作成できるようになったため、かなり見やすくなりました！
stateの書き換えが容易であったり、gettersが簡潔であったり、、、恩恵はたくさんあります＾＾
<br>
#### 型安全

これがPinia最大のメリットと言っても過言ではありません！

TypeScriptがフルサポートされているため
型推論によって、常に型安全な状態が保証されます、、、なんと素晴らしい、、！
<br>
#### とっても軽い

Piniaの重さは約1kbで、そこにあることさえ忘れてしまいます（可愛いので公式直訳）
動作サックサクはいいことしかないですね＾＾
<br>
#### Vue2/Vue3に対応

少し前までは、Vue2で使用する場合にはCompositionAPIプラグインの追加が必須となっていましたが
現在は追加しなくとも問題なく使えるようです。

<br>

## Piniaの気になるところ

基本的にPiniaはVuexの改良版になっていると思うのですが、
Vuexと比べると大幅に変わったところもあるので
人によってはデメリットと捉えられるのかな？と思う点を挙げてみました！
<br>
#### Store外でも書き換え可能

Storeの外から直接値を書き換えることができる点では、
開発が大規模であればあるほど、不安要素になりかねませんね。。。
<br>
#### Mutations廃止

mutationsがなくなった代わりに、
stateの値を変更する場合には、actionsを使用する書き方へと変わりました。

しかし、mutationsが廃止されたことに関しては、賛否両論あるみたいです。。。
個人的には形骸化していたものがなくなった、と捉えられるなと思いました！

みなさんはどう思いますか？？

<br>

## Piniaを使ってみよう

早速プロジェクトを作成、ファイルに移動しPiniaをインストールしていきます！

``npm``を使用する場合
```
$ npm install pinia
```
``yarn``を使用する場合
```
$ yarn add pinia
```
インストール後``package.json``を覗くとバージョン確認できるので、覗いてみてください〜！

<br>

次にPiniaを読み込む下準備をします！
TypeScriptを用いる場合、``main.ts``に下記のように書き込んでいきます＾＾
```ts:main.ts
import { createPinia } from 'pinia'

// 変数piniaに代入
const pinia = createPinia()
app.use(pinia)
```
このようにしてPiniaインスタンスを変数に代入することで、より簡単にアクセスできるようになります。
<br>

Piniaの基本的な書き方はざっくりとこんな感じです

```ts:src/stores/hoge.ts
import { defineStore } from 'pinia'

// 'hoge'はstoreの名前
export const useStore = defineStore('hoge', {
  
  state: () => {
    return {
      // プロパティ名: 初期値
      counter: 0,
      name: 'Eduardo',
    }
  },

  getters: {
    // stateを受け取ることができる
    doubleCount: (state) => state.counter * 2,

    // gettersは他のgettersへのアクセスも可能
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },

  actions: {
    // stateで定義したデータの更新
    reset() {
      this.counter = 0
    },
  },
})
```
<br>

このような流れでPiniaは導入することができます！
詳しくはPiniaの📌[GitHub](https://github.com/vuejs/pinia)に載っているのでいるので是非見てみてください＾＾

## データの流れ
上述したPiniaのデータの流れを言葉で表すとこんな感じです。

``state``
初期値を返す関数を定義
（actionsが取ってきた値で中身を更新）

↓

``getters``
stateのデータに対する算出プロパティを定義
（引数に応じて結果を差し替える場合には、フロント上で関数をreturnする必要がある）

↓

``actions``
mutationsが廃止されているため、stateで定義したデータの更新は全てactionsで行う

```ts:hoge.ts
actions: {
    // カウンターを0にリセット
    reset() {
      this.counter = 0
    },
  },
```





<br>

## 参考文献
📌[GitHub](https://github.com/vuejs/pinia)
📌[グローバルステート管理ライブラリである「Pinia」について](https://qiita.com/kambe0331/items/bbcd09e820d15a5e1981)


<br>

## おわりに

開発の規模の大小に関わらず、TypeScriptとの相性の良さや記述量の削減という観点から
Piniaを導入するメリットは多いように感じます、、、！

名前も可愛いですし、今後も可愛がっていきたいライブラリです＾＾