Vue.js Pinia

今回は、Piniaを使った状態管理ををやります。
これを使うと複数ページ、複数コンポーネントでデータを共有できます。

シンプルなサンプル

プロジェクト生成時に指定するオプションでPiniaを指定すると、Pinia関連機能がプロジェクトに追加されます。


npm create vue@latest


*  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
|  [•] TypeScript
|  [ ] JSX Support
|  [ ] Router (SPA development)
|  [+] Pinia (state management)
|  [ ] Vitest (unit testing)
|  [ ] End-to-End Testing
|  [ ] ESLint (error prevention)
|  [ ] Prettier (code formatting)
—

src\stores\counter.js

このファイルは以下の内容で自動生成されます。状態管理を行いたいデータの設定を行います。


import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const countdoubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, countdoubleCount, increment }
})

defineStoreで状態管理を行いたいデータやアクセスするためのメソッドを定義します。

src\main.js

このファイルも以下の内容で自動生成されます。Piniaを取り込む設定も自動で作成されます。


import './assets/main.css'

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

const app = createApp(App)

app.use(createPinia())

app.mount('#app')

src\App.vue

このファイルも自動生成されるのですが、Pinia動作確認用に修正しました。


<script setup>
import { useCounterStore } from "./stores/counter"

const store = useCounterStore();

function exec() {
  store.increment()
}
</script>

<template>
  <h1>{{ store.count }} : {{ store.countdoubleCount }}</h1>
  <button @click="exec">btn</button>
</template>

実行イメージ

ページのトップへ戻る