お仕事で扱う技術が、Vue2 & Vuex から Vue3 & Pinia へ構成が変化したので勉強したこと、忘れそうなことを備忘録として残します！（間違っている可能性は大いにあるので生暖かい目で見てください）
Pinia（ぴーにゃ） とは
Vue.js の Store管理を行う状態管理ツールです。
Vue のバージョン 3 から Vue 公式に推奨されているようです。
store とは
値の状態を管理するものです。
各コンポーネントに、動作に必要な値を分散して記述するより、関係性ごとに集中管理した方が可読性が高く、安心安全性が高めだよねというスタンスです。（だと思っています）
store を定義し、使いたい時は目的の値が含まれた store を読み込んで使用します。
値を変更したい時は store を経由して値を変更します。
Reactとかだと、Redux、Recoil などが store 管理ができるライブラリになります。
ざっくり使い方
store
// useUserStore
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
fastName: "" as string,
lastName: "" as string,
age: null as number | null
}),
getters:{
getFullName: (state)=> `${state.fastName} ${state.lastName} `
},
actions: {
changeFastName(fastName: string) {
this.fastName = fastName
},
changeLastName(lastName: string) {
this.lastName = lastName
},
changeAge(age: number) {
this.age = age ?? 0
},
resetUser(){
this.$reset
}
}
})
state
state です。
その store で扱いたい値を定義しておく場所です。
公式リファレンス
Getters
Vuex の computed に相当します
主に、state の値に対する計算・加工などを行います。
state の値が更新されると自動的に定義している処理が走り、値が再計算されます。
公式リファレンス
actions
Vuex の methods に相当します
非同期処理を記載することができるので、API通信時などはここに記載します。
async/await を使いたくなったらここに書きます。
state 自身の値を更新したりするのもここの役割だそうです。
公式リファレンス
使用方法
説明はコメントに記載しています。
<script setup>
import { useUserStore } from '~/store/useUserStore'
import { setActivePinia,createPinia } from 'pinia'
import {ref, computed} from 'vue'
// store を初期化
const store = useUserStore()
// store に定義した actions を使って store を間接的に書き換える
store.changeFastName("やまだ")
store.changeLastName("はなこ")
store.changeAge(20)
/*
getters は以下のように変数に代入しておくと、
関連する state が変わったときに何もしなくても値が更新される
*/
const fullName = computed(
() => {
return store.getFullName;
}
)
</script>
<template>
<div>
<!-- state を呼び出して使う -->
<p>fastName: {{store.fastName}}</p>
<p>laseName: {{store.lastName}}</p>
<p>age: {{store.age}}</p>
<p>fullName: {{fullName}}</p>
</div>
</template>
npm run dev をして立ち上げて見ると、こんな見た目になります。
なんらかの方法でfastNameを書き換えると、fullName も書き換わります。
まとめ
みなさまも良き Vue ライフをお送りください！