vue3 axios pinia

Vue3 是一种流行的 JavaScript 框架，Axios 是一个流行的 HTTP 客户端库，而 Pinia 是一个状态管理库。这三个库可以在 Vue3 应用程序中一起使用，以便轻松地管理应用程序的状态和与 API 的交互。Axios 可以用于从服务器获取数据，而 Pinia 可以管理数据的状态，并将其绑定到组件中。以下是如何一起使用这三个库的示例代码：

首先安装这些包：

npm install axios @vue/composition-api @pinia/vo

在你的代码中添加以下代码：

import { createPinia } from '@pinia/vo'
import { reactive, computed } from '@vue/composition-api'
import axios from 'axios'

const pinia = createPinia()

export const useStore = pinia.defineStore('store', {
  state: () => ({
    data: reactive([]),
  }),
  actions: {
    async fetchData() {
      const response = await axios.get('/api/data')
      this.data = response.data
    },
  },
  getters: {
    computedData() {
      return computed(() => this.data.map((item) => item * 2))
    },
  },
})

在组件中使用 `useStore()` 函数来访问数据和方法：

<script>
import { useStore } from './store'

export default {
  setup() {
    const store = useStore()

    return {
      data: store.data,
      computedData: store.computedData,
      fetchData: store.fetchData,
    }
  },
}
</script>

这样就可以在组件中使用状态管理和后端 API 交互了。