import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

import { defineStore } from 'pinia'
export const userStore = defineStore('user', {
    state: () => {
        return { 
            count: 1,
            arr: []
        }
    },
    getters: { ... },
    actions: { ... }
})

<template>
    <div>{{ user_store.count }}</div>
</template>
<script lang="ts" setup>
import { userStore } from '../store'
const user_store = userStore()
// 解構(gòu)
// const { count } = userStore()
</script>

<template>
    <div>{{ count }}</div>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { userStore } from '../store'
const { count } = storeToRefs(userStore())
</script>

<template>
    <div>{{ myCount }}</div>
    <div>{{ myCount }}</div>
    <div>{{ myCount }}</div>
</template>

getters: {
    // 方法一，接收一個(gè)可選參數(shù) state
    myCount(state){
        console.log('調(diào)用了') // 頁(yè)面中使用了三次，這里只會(huì)執(zhí)行一次，然后緩存起來(lái)了
        return state.count + 1
    },
    // 方法二，不傳參數(shù)，使用 this
    // 但是必須指定函數(shù)返回值的類(lèi)型，否則類(lèi)型推導(dǎo)不出來(lái)
    myCount(): number{
        return this.count + 1
    }
}

<template>
    <div>{{ user_store.count }}</div>
    <button @click="handleClick">按鈕</button>
</template>
<script lang="ts" setup>
import { userStore } from '../store'
const user_store = userStore()
const handleClick = () => {
    // 方法一
    user_store.count++
    
    // 方法二，需要修改多個(gè)數(shù)據(jù)，建議用 $patch 批量更新，傳入一個(gè)對(duì)象
    user_store.$patch({
        count: user_store.count1++,
        // arr: user_store.arr.push(1) // 錯(cuò)誤
        arr: [ ...user_store.arr, 1 ] // 可以，但是還得把整個(gè)數(shù)組都拿出來(lái)解構(gòu)，就沒(méi)必要
    })
    
    // 使用 $patch 性能更優(yōu)，因?yàn)槎鄠€(gè)數(shù)據(jù)更新只會(huì)更新一次視圖
    
    // 方法三，還是$patch，傳入函數(shù)，第一個(gè)參數(shù)就是 state
    user_store.$patch( state => {
        state.count++
        state.arr.push(1)
    })
}
</script>

actions: {
    changeState(num: number){ // 不能用箭頭函數(shù)
        this.count += num
    }
}

const handleClick = () => {
    user_store.changeState(1)
}

// 接口數(shù)據(jù)類(lèi)型
export interface userListType{
    id: number
    name: string
    age: number
}
// 模擬請(qǐng)求接口返回的數(shù)據(jù)
const userList = [
    { id: 1, name: '張三', age: 18 },
    { id: 2, name: '李四', age: 19 },
]
// 封裝模擬異步效果的定時(shí)器
async function wait(delay: number){
    return new Promise((resolve) => setTimeout(resolve, delay))
}
// 接口
export const getUserList = async () => {
    await wait(100) // 延遲100毫秒返回
    return userList
}

import { defineStore } from 'pinia'
import { getUserList, userListType } from '../api/user'
export const userStore = defineStore('user', {
    state: () => {
        return {
            // 用戶列表
            list: [] as userListType // 類(lèi)型轉(zhuǎn)換成 userListType
        }
    },
    actions: { 
        async loadUserList(){
            const list = await getUserList()
            this.list = list
        }
    }
})

<template>
    <ul>
        <li v-for="item in user_store.list"> ... </li>
    </ul>
</template>
<script lang="ts" setup>
import { userStore } from '../store'
const user_store = userStore()
user_store.loadUserList() // 加載所有數(shù)據(jù)
</script>

// chat.ts
import { defineStore } from 'pinia'
import { userStore } from './user'
export const chatStore = defineStore('chat', {
    actions: { 
        someMethod(userItem){
            userItem.name = '新的名字'
            const user_store = userStore()
            user_store.updateUserName(userItem)
        }
    }
})

// user.ts
import { defineStore } from 'pinia'
export const userStore = defineStore('user', {
    state: () => {
        return {
            list: []
        }
    },
    actions: { 
        updateUserName(userItem){
            const user = this.list.find(item => item.id === userItem.id)
            if(user){
                user.name = userItem.name
            }
        }
    }
})