未分類

Vue3のプロジェクトにPiniaを導入する。

Piniaをインストールする。

npm install pinia

VueプロジェクトにPiniaを組み込む

main.ts

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

createApp(App).use(createPinia()).mount("#app");

Storeを定義する

import { defineStore } from "pinia";

export default defineStore("useUserStore", {

// ステート
  state: () => {
    return {
      uid: "init_uid",
    };
  },

//ゲッター
  getters: {
    uidPlusMark: (state) => state.uid + "!",
  },

//アクション
  actions: {
    change_uid(uid: string) {
      this.uid = uid;
    },
  },
});

※Piniaにミューテーションはない。

コンポーネント側で使用する

<template>
  <p>{{ uid }}</p>
  <p>{{ newUid }}</p>
  <button @click="stateChange">statechange</button>
</template>

<script setup lang="ts">
import useUserStore from "../store/useUserStore";
import { storeToRefs } from 'pinia'

const userStore = useUserStore();
const { uid } = storeToRefs(userStore);

const stateChange = () => {
  userStore.change_uid('changed');
}

const newUid = computed(() => {
  return userStore.uidPlusMark;
}
)
</script>

※store を storeToRefs 関数でラップするこにより,stateの値をリアクティブに取得することができる。

-未分類