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

import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
  el: '#app',
  // 其他選項...
  // ...
  // 注意同一個 `pinia` 實例可以在多個 Vue 應用程序中使用
  // 同一個頁面
  pinia,
})

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
      msg: '開心',
      todoList: ['吃飯', '繪畫']
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  actions: {
    increment(payload?: number) {
      this.count = payload ? this.count + payload : this.count + 1
    }
  }
})

  <template>
	<div class="about">
		<p>{{ counterStore.msg }}</p>
	    <p>{{ counterStore.count }}</p>
	    <p>{{ counterStore.doubleCount }}</p>
	    <p @click="() =>counterStore.increment(3)">點擊我+1</p>
  </div>
  </template>
  <script setup lang="ts">
	  import { storeToRefs } from 'pinia'
	  import { useCounterStore } from '@/stores/counter'
	  const counterStore = useCounterStore()
  </script>

<template>
  <div class="about">
    <p>{{ count }}</p>
    <p>{{ msg }}</p>
    <p>{{ doubleCount }}</p>
    <ul>
      <li v-for="(item, index) in todoList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup lang="ts">
  import { storeToRefs } from 'pinia'
  import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 也可以使用storeToRefs進行解構
  let { count, doubleCount, msg, todoList } = storeToRefs(counterStore)
</script>

counterStore.count++

const newTodoList = [...counterStore.todoList, '睡午覺']
counterStore.$patch({
	 count: 100,
	 msg: '哈哈',
	 todoList: newTodoList
})

counterStore.$patch((state) => {
    state.count = 100,
    state.msg = '哈哈',
    state.todoList.push('聽音樂')
})

actions: {
    increment(payload?: number) {
      this.count = payload ? this.count + payload : this.count + 1
    }
}

counterStore.$reset()

counterStore.$state = {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> counter: 666, msg: 'Paimon', todoList: [] }

pinia.state.value = {}

counterStore.$subscribe((mutation, state) => {
  // 每當它發(fā)生變化時，將整個狀態(tài)持久化到本地存儲
  localStorage.setItem('cart', JSON.stringify(state))
})

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
      msg: '開心',
      todoList: ['吃飯', '繪畫']
    }
  },
  getters: {
  //自動將返回類型推斷為數(shù)字
    doubleCount(state) {
      return state.count * 2
    }
  }
})

getters: {
	// 返回類型必須明確設置
    doublePlusOne():number {
      return this.doubleCount + 1
    }
  }

getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  }

<template>
  <p>User 2: {{ counterStore.getUserById(2) }}</p>
</template>