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

Vue 组件的 methods 中

将请求数据的逻辑写在组件的 methods 中，适用于一些简单的场景，特别是当数据仅在该组件中使用时。

优点

• 简单直接：将逻辑放在组件中，可以快速实现数据请求。
• 无需全局状态管理：适用于不需要共享状态的小型应用或单个组件的数据请求。

缺点

• 难以维护：当应用规模增大时，可能会导致逻辑分散，难以维护。
• 重复代码：多个组件可能会重复相同的数据请求逻辑。

示例代码

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

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

Vuex 的 actions 中

将请求数据的逻辑写在 Vuex 的 actions 中，适用于需要共享状态或全局管理数据的场景。

优点

• 集中管理：数据请求逻辑集中在 Vuex 中，便于维护和管理。
• 共享状态：便于在多个组件之间共享数据，避免重复请求。
• 更好的测试：可以更容易地对数据请求逻辑进行单元测试。

缺点

• 复杂度增加：引入 Vuex 增加了一定的复杂度，特别是对于简单的应用来说。
• 需要额外的配置：需要配置 Vuex store 和相应的 actions、mutations 等。

示例代码

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: null,
  },
  mutations: {
    setData(state, data) {
      state.data = data;
    },
  },
  actions: {
    async fetchData({ commit }) {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        commit('setData', data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
  },
});

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['data']),
  },
  methods: {
    ...mapActions(['fetchData']),
  },
};
</script>

选择方法的考虑因素

• 应用规模：对于小型应用或一次性的数据请求，可以将逻辑放在组件中；对于大型应用或需要共享状态的数据请求，使用 Vuex 更合适。
• 代码可维护性：使用 Vuex 可以更好地管理和维护代码，但也增加了一些复杂度。
• 状态共享需求：如果多个组件需要共享同一数据，使用 Vuex 是更好的选择。

总结

一般来说，简单的应用或数据请求逻辑可以放在组件的 methods 中，而对于复杂的应用或需要共享状态的数据请求，使用 Vuex 的 actions 更为合适。这两种方法可以根据具体的需求和场景灵活选择。