其它小组件

0-Pinia

文档地址：https://pinia.vuejs.org/zh/introduction.html

使用 Pinia 之前，需要创建一个 Pinia 实例并传递给总应用

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

一个简单的 Pinia 案例，实现计数器自增

// 该文件在 src/stores/counter.js
// 1. 导入一个方法 defineStore
import { defineStore } from 'pinia'
import { ref } from 'vue'
 
// 2. 定义完这个对象将其导出，导出的还是一个方法，需要执行才能得到实例化对象
export const useCounterStore = defineStore('counter', () => {
    // 2.1 定义一个响应式变量
    const count = ref(0)
    // 2.2 定义一个方法
    const addCount = () => {
        count.value++
    }
    // 2.3 将定义的对象返回出去，供组件使用
    return {
        count,
        addCount
    }
})

然后在 App.vue 中使用

<script setup>
// 1. 导入我们定义的方法
import { useCounterStore } from '@/stores/counter'
// 2. 通过方法实例化对象
const counterStore = useCounterStore()
console.log(counterStore)
</script>
 
<template>
  <button @click="counterStore.addCount">{{ counterStore.count }}</button>
</template>

1-axios

官方文档：https://axios-http.com/zh/docs/intro 用来发起网络请求