🍍

Nuxt 3 RC版 + Piniaを試してみる

2022/04/28に公開約2,300字

はじめに

対象読者

  • Nuxt 3 + Piniaの構成を試してみたい方
  • Piniaのサンプルコードを見てみたい方

Piniaとは

https://pinia.vuejs.org/
  • 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

ソースコード一式

https://github.com/yasu-s/nuxt-pinia-sample/tree/demo

おわりに

  • Nuxt 3 + Piniaの構成が簡単に構築出来ました。
  • PiniaはTypeScriptサポートが充実しているため、型安全で状態管理を実装出来ます。
  • Piniaを試してみて使いやすかったので、実業務でも使えるか検討してみたいと思います。

参考URL

https://v3.nuxtjs.org/

https://pinia.vuejs.org/ssr/nuxt.html

Discussion

ログインするとコメントできます