面试题：请求数据的逻辑应该写在 Vue 组件的 methods 中还是 Vuex 的 actions 中？

请求数据的逻辑应该写在 Vuex 的 actions 中，而不是直接写在 Vue 组件的 methods 中。以下是详细的解释和原因：

1. 为什么应该写在 Vuex 的 actions 中？

1.1 状态集中管理

Vuex 的核心思想是集中管理应用的状态。将请求数据的逻辑放在 Vuex 的 actions 中，可以确保状态的变化和数据的获取都在一个地方管理，避免状态分散在多个组件中。

1.2 逻辑复用

如果多个组件需要请求相同的数据，将逻辑放在 Vuex 的 actions 中可以避免代码重复。
通过 actions 统一管理数据请求，可以在不同组件中共享数据。

1.3 异步操作

Vuex 的 actions 支持异步操作（如 async/await），适合处理数据请求等异步任务。
在 actions 中完成数据请求后，可以通过 commit 提交 mutation 来更新状态。

1.4 更好的可维护性

将数据请求逻辑与组件分离，可以提高代码的可维护性。
当需要修改数据请求逻辑时，只需修改 Vuex 中的 actions，而不需要修改多个组件。

2. 为什么不建议写在组件的 `methods` 中？

2.1 状态分散

如果每个组件都自己请求数据，会导致状态分散在多个组件中，难以维护和调试。

2.2 代码重复

多个组件可能需要请求相同的数据，如果每个组件都自己实现请求逻辑，会导致代码重复。

2.3 难以共享数据

组件之间无法直接共享数据，可能导致重复请求或数据不一致的问题。

3. 如何正确使用 Vuex 的 actions 请求数据？

以下是一个完整的示例，展示如何在 Vuex 的 actions 中请求数据，并在组件中使用。

3.1 Vuex Store 配置

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userList: [], // 存储用户列表
  },
  mutations: {
    SET_USER_LIST(state, userList) {
      state.userList = userList; // 更新用户列表
    },
  },
  actions: {
    async fetchUserList({ commit }) {
      try {
        const response = await axios.get('/api/users'); // 请求用户列表
        commit('SET_USER_LIST', response.data); // 提交 mutation 更新状态
      } catch (error) {
        console.error('请求用户列表失败:', error);
      }
    },
  },
  getters: {
    userList: (state) => state.userList, // 获取用户列表
  },
});

3.2 组件中使用

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
    <button @click="loadUserList">加载用户列表</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['userList']), // 映射 Vuex 的 getters
  },
  methods: {
    ...mapActions(['fetchUserList']), // 映射 Vuex 的 actions
    async loadUserList() {
      await this.fetchUserList(); // 调用 actions 中的方法
    },
  },
  mounted() {
    this.loadUserList(); // 组件加载时自动请求数据
  },
};
</script>

3.3 关键点：

actions 中请求数据：
- 使用 axios 或其他 HTTP 库请求数据。
- 请求完成后，通过 commit 提交 mutation 更新状态。
组件中调用 actions：
- 使用 mapActions 将 actions 映射到组件的方法中。
- 在组件中调用 actions 的方法来触发数据请求。
通过 getters 获取数据：
- 使用 mapGetters 将 getters 映射到组件的计算属性中。
- 在模板中直接使用计算属性渲染数据。

4. 特殊情况：何时可以将请求逻辑写在组件中？

在某些简单场景下，如果数据仅在一个组件中使用，且不需要共享，可以将请求逻辑写在组件的 methods 中。例如：

组件内部的临时数据。
不需要跨组件共享的数据。

示例：

<template>
  <div>
    <p>{{ data }}</p>
    <button @click="fetchData">加载数据</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/data');
        this.data = response.data;
      } catch (error) {
        console.error('请求数据失败:', error);
      }
    },
  },
};
</script>