<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

<script setup lang='ts'>

const count = ref(0) // 0で初期化されたリアクティブな変数

// リアクティブな変数を更新する処理
function increment() {
    count.value++  // scriptブロックでリアクティブな変数を操作する際は.valueプロパティで参照する
}
</script>
<template>
    <p>現在の数値: {{ count }}</p>
    <button @click="increment">加算する</button>
</template>

<script setup lang='ts'>

const count = ref(0)
const doubleCount = computed( // countの2倍した値を常にリアクティブにしたい
    (): number => {
        count.value * 2
    }
);

function increment() {
    count.value++
}
</script>
<template>
    <p>元の数値: {{ count }}</p>
    <p>2倍にした値: {{ doubleCount }}</p>
    <button @click="increment">加算する</button>
</template>

<script setup lang='ts'>
// ユーザー情報をまとめてリアクティブな値としたい
const user = reactive({
    name: "Tanaka",
    age: 20
})

function incrementAge() {
    user.age++
}
</script>
<template>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <button @click="incrementAge">年齢加算</button>
</template>

<script setup lang="ts">

const count = ref(0)

watchEffect() = {
    console.log(`countの値が変化しました: ${count.value}`)
})

function increment() {
    count.value++
}
</script>
<template>
    <p>{{ count }}</p>
    <button @click="increment">加算する</button>
</template>

<script setup lang="ts">
const count = ref(0)

watch(count, (newVal, oldVal) => {
    console.log(`countの値が変化しました: ${oldVal} → ${newVal}`)
})

function increment() {
    count.value++
}
</script>
<template>
    <p>{{ count }}</p>
    <button @click="increment">加算する</button>
</template>

<script setup lang="ts">
 const message = ref('Hello')
</script>
<template>
    <ChildComponent v-bind:msg="message" />
</template>

<script setup lang="ts">
 const props = defineProps<{
    msg: string
}>()
</script>
<template>
    <p>{{ props.msg }}</p>
</template>

<script setup lang="ts">
const count = ref(0)

function increment() {
    count.value++
}
</script>
<template>
    <button v-on:click="increment">カウントアップ</button>
    <p>Count:{{ count }}</p>
</template>

<script setup lang="ts">
const message = ref('')
</script>
<template>
    // 入力された内容が自動でmessage変数に反映される
    // コード内でmessage.valueを書き換えれば自動でinputの値も変わる
    <input v-model="message" type="text">
    <p>入力内容: {{ message }}</p>
</template>

<script setup lang="ts">
const userInput = ref('')
</script>
<template>
    <ChildComponent v-model="userInput">
    <p>入力値: {{ userInput }}</p>
</template>

<script setup lang="ts">
const props = defineProps<{
    modelValue: string
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value:  string): void
}>()

function handleInput(e: Event) {
    const target = e.target as HTMLInputElement
    emit('update:modelValue', target.value)
}
</script>
<template>
    // 内部の入力値が変わったらhandleInput()で親に通知する
    <input :value="props.modelValue" @input="handleInput" type="text" />
</template>

<script setup lang="ts">
const isLoggedIn = ref(false)
</script>
<template>
    <div v-if="isLoggedIn">
        ログイン中
    </div>
    <div v-else>
        未ログイン
    </div>
</template>

<script setup lang="ts">
const isVisible = ref(true)
</script>
<template>
    <div v-show="isVisible">
        表示・非表示の切替
    </div>
</template>

<script setup lang="ts">
interface Task {
    id: number
    title: string
    done: boolean
}
const tasks = ref<Task[]>([
    { id: 1, title: "タスク1”,  done: false },
    { id: 2, title: "タスク2”,  done: true },
])
</script>
<template>
   <ul>
       <li v-for="task in tasks" :key="task.id">
           {{ task.title }}
       </li>
   </ul>
</template>

<script setup lang="ts">
interface Props {
    title: string
    subtitle: string
}
const props = defineProps<Props>();
</script>
<template>
    <h1>{{ props.title }}</h1>
    <h2>{{ props.subtitle }}</h2>
</template>

<script setup lang="ts">
const mainTitle = ref('タイトル')
const subTitle = ref('サブタイトル')
</script>
<template>
    <ChildComponemt :title="mainTitle" :subtitle="subTitle" />
</template>

<scirpt setup lang="ts">
type Emits = {
    (event: 'child-cliclked', payload: string)
}
const emit = defineEmits<Emits>();

function handleClick() {
    emit('child-clicked', 'Hello from child')
}
</scirpt>
<template>
    <button @click="handleClick">子コンポーネントのボタン</button>
</template>

<scirpt setup lang="ts">
function handleChildClicked(message: string) {
    console.log('子でクリックが発生', message)
}
</scirpt>
<template>
    <ChildComponent @child-clicked="handleChildClicked" />
</template>

<script setup lang="ts">
export const useUserState = () => {
    // "user"というステートを定義
    const user = useState<{ name: string }>('user', () => ({ name: '' }))

    function setUserName(name: string) {
        user.value.name = name
    }

    return { user, setUserName }
}
</script>

<script setup lang="ts">
import { useUserState } from '~/comosables/useUser'

const { setUserName } = useUserState()

function onLogin() {
    setUserName("Hoge")
}
</script>
<template>
    <button @click="onLogin">ログイン</button>
</template>

<script setup lang="ts">
import { useUserState } from '~/comosables/useUser'

const { user } = useUserState()
</script>
<template>
    <p>こんにちは、{{ user.name }}さん</p>
</template>

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    // state: ストアで保持するリアクティブな値
    state: () => ({
        count: 0
    }),

    // getters: stateから派生する値。Vueのcomputedと似たイメージ
    gettrers: {
        doubleCount: (state) => state.count * 2,
    },

    // actions: stateを更新したりするメソッド
    actions: {
        increment() {
            this.count++
        },
    },
})

<script setup lang="ts">
import { useCounterStore } from '~/stores/counter'

// ストアを呼び出す
const counterStore = useCounterStore()

// 値やメソッドへアクセス
function increment() {
    counterStore.increment()
}
</script>
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <p>DoubleCount: {{ counterStore.doubleCount }}</p>
        <button @click="increment">+1</button>
    </div>
</template>