【Vue3】reactiveを使って状態管理しよう！

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve
touch src/my-service.ts 

import { reactive } from "vue"; // Vueのreactive関数をインポート

// リアクティブな状態オブジェクトを作成
// reactive関数は、オブジェクトをリアクティブにし、状態が変化したときにVueコンポーネントが自動的に再レンダリングされるようにします
const state = reactive({　key: 初期値　});

import { reactive } from "vue"; // Vueのreactive関数をインポート

// リアクティブな状態オブジェクトを作成
// reactive関数は、オブジェクトをリアクティブにし、状態が変化したときにVueコンポーネントが自動的に再レンダリングされるようにします
export const state = reactive({
  userName: "サメハック", // 初期のユーザー名
  job: "エンジニア", // 初期の仕事
});

// ユーザー名を更新する関数
// この関数は、引数として受け取った名前をstate.userNameに設定します
export const updateUserName = (name) => {
  state.userName = name; // stateオブジェクトのuserNameプロパティを新しい名前に更新
};

// ユーザー名をクリアする関数
// この関数は、state.userNameを空の文字列に設定します
export const clearUserName = () => {
  state.userName = ""; // stateオブジェクトのuserNameプロパティを空の文字列に更新
};

<template>
  <!-- ユーザー名を表示する部分 -->
  <!-- myService.state.userName からユーザー名を取得して表示 -->
  <div>なまえ：{{ myService.state.userName }}</div>

  <!-- 仕事を表示する部分 -->
  <!-- myService.state.job から仕事を取得して表示 -->
  <div>しごと：{{ myService.state.job }}</div>

  <!-- ボタンをクリックしてユーザー名を「ねこハック」に更新 -->
  <!-- @click ディレクティブでクリックイベントを監視 -->
  <!-- myService.updateUserName('ねこハック') を実行 -->
  <button @click="myService.updateUserName('ねこハック')">名前書き換え</button>

  <!-- ボタンをクリックしてユーザー名をクリア -->
  <!-- @click ディレクティブでクリックイベントを監視 -->
  <!-- myService.clearUserName を実行 -->
  <button @click="myService.clearUserName">名前をクリア</button>
</template>

<script setup>
// my-service.ts からエクスポートされたモジュール全体を myService としてインポート
// このファイル内で myService という名前でサービスを利用可能にする
import * as myService from "./my-service.ts";
</script>