🍍
Nuxt 3 RC版 + Piniaを試してみる
はじめに
- Nuxt 3 RC版がリリースされたので、Nuxt 3 + Piniaの構成を試してみたいと思います。
対象読者
- Nuxt 3 + Piniaの構成を試してみたい方
- Piniaのサンプルコードを見てみたい方
Piniaとは
- Vue向けの状態管理ライブラリです
- Vuexとの違いは以下の通りです
- mutationsの廃止
- TypeScriptサポート
- ネストされたモジュールの廃止などなど
動作環境
- Node.js - 16.x
- Yarn - 1.22.x
使用ライブラリ
- nuxt - 3.0.0-rc.1
- pinia - 2.0.x
- @pinia/nuxt - 0.1.8
サンプルコード
nuxt.config.ts
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
buildModules: ['@pinia/nuxt'],
})
-
Pinia公式のNuxt.jsの設定箇所を参考に
buildModulesに@pinia/nuxtを追加します。 - Nuxt 3系の場合、
@nuxtjs/composition-api/moduleの追加は不要です。
store/counter.ts
store/counter.ts
import { defineStore } from 'pinia'
/** counterストア */
export const useCounterStore = defineStore('counter', {
state: () => ({
/** 件数 */
count: 0,
}),
getters: {
/** countを2倍 */
double: (state) => state.count * 2,
},
actions: {
/**
* countに1を加算
*/
increment() {
this.count++
},
},
})
- state: 型と初期値を定義します
- getters: stateの値を加工して返す処理を定義します
- actions: stateを操作する処理を定義します
app.vue
app.vue
<script lang="ts" setup>
import { useCounterStore } from '@/store/counter'
/** store */
const counterStore = useCounterStore()
/**
* increment実行
*/
function increment() {
counterStore.increment()
}
/**
* storeの状態をリセット
*/
function reset() {
counterStore.$reset()
}
</script>
<template>
<div>
<div>
<button @click="increment()">increment</button>
<button @click="reset()">reset</button>
</div>
<div>count: {{ counterStore.count }}</div>
<div>double: {{ counterStore.double }}</div>
</div>
</template>
-
store/counter.tsで定義したuseCounterStoreをコンポーネントで使用します。 - VuexのようにStringでtypeを指定するのではなく、state、getters、actionsで定義した内容をそのまま使用できます。
動作確認
yarn dev
ソースコード一式
おわりに
- Nuxt 3 + Piniaの構成が簡単に構築出来ました。
- PiniaはTypeScriptサポートが充実しているため、型安全で状態管理を実装出来ます。
- Piniaを試してみて使いやすかったので、実業務でも使えるか検討してみたいと思います。
参考URL
Discussion