<template>
  <div class="index">
    <h1>useState当前计数{{ counter.counter }}</h1>
    <button @click="increment">+1</button>
    <h1>------------------------------</h1>
    <h1>pinia 中的当前计数{{ count }}</h1>
    <button @click="decrement">-1</button>
    <h1>------------------------------</h1>
    <el-button>element-button</el-button>
    <el-button type="primary">element-button</el-button>
    <el-button type="danger">element-button</el-button>
    <el-button type="info">element-button</el-button>
    <el-button type="success">element-button</el-button>
  </div>
</template>

<script lang="ts" setup>
  import request from '@/service'
  import useMainStore from '@/store/index'
  //获取 共享数据 state
  const counter = useCounter()

  const increment = () => {
    counter.value.counter++
  }

  // 获取pinia中的数据
  const mainStore = useMainStore()
  const { count } = toRefs(mainStore)
  const decrement = () => {
    mainStore.increment()
  }

  //获取app实例
  const app = useNuxtApp()
  console.log(app.$format(10, 20))

  //刷新时只在服务端进行请求，路由切换的话只在客户端进行请求
  const res = await request.post('/user/login', {
    body: {
      username: '刘有清',
      password: '123456'
    }
  })
  console.log(res)
</script>

<style scoped></style>
