Vue 网络请求的放置位置

在 Vue 项目开发中，合理放置网络请求至关重要，它直接影响到应用的性能、可维护性和用户体验。

组件内直接调用

在一些小型项目或者简单页面中，将网络请求直接放在组件的 created 钩子函数里是常见做法。例如：

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://example.com/api/data');
      const result = await response.json();
      this.data = result;
    }
  }
};
</script>

这种方式简单直接，数据获取与组件紧密关联，能快速实现功能。但缺点也很明显，如果多个组件都需要相同的数据请求，代码会大量重复，而且不利于后期维护和测试。

Vuex 或 Pinia 中处理

对于中大型项目，建议将网络请求放在状态管理库（Vuex 或 Pinia）中。以 Pinia 为例：

import { defineStore } from 'pinia';

export const useDataStore = defineStore('data', {
  state: () => ({
    data: null
  }),
  actions: {
    async fetchData() {
      const response = await fetch('https://example.com/api/data');
      const result = await response.json();
      this.data = result;
    }
  }
});

在组件中使用时：

<template>
  <div>{{ data }}</div>
</template>

<script>
import { useDataStore } from '@/stores/data';

export default {
  setup() {
    const dataStore = useDataStore();
    dataStore.fetchData();
    return {
      data: dataStore.data
    };
  }
};
</script>

这样做的好处是集中管理数据请求，便于复用和维护，同时能更好地处理数据缓存和状态同步问题，提升应用的整体性能。

独立服务模块

将网络请求封装成独立的服务模块也是不错的选择。创建一个 api.js 文件：

async function fetchData() {
  const response = await fetch('https://example.com/api/data');
  const result = await response.json();
  return result;
}

export { fetchData };

在组件或状态管理库中调用：

<template>
  <div>{{ data }}</div>
</template>

<script>
import { fetchData } from '@/api';

export default {
  data() {
    return {
      data: null
    };
  },
  async created() {
    this.data = await fetchData();
  }
};
</script>

这种方式使代码结构更清晰，网络请求逻辑与业务代码分离，提高代码的可维护性和可测试性。

选择合适的 Vue 网络请求放置位置需要综合考虑项目规模、复杂度以及可维护性等因素，确保应用的高效运行和良好开发体验。