【前端VUE基础（六）】组件发请求的几种方式

        在 Vue 组件中，有几种常见的方式可以发送请求，以下是在 methods、mounted、computed 和 watch 中发送请求的对比：

方式	适用场景	发起请求时机	数据处理和更新方式
methods	用户操作触发的事件、组件内部方法调用	手动触发，如按钮点击、方法调用等	通过回调函数处理响应数据，并手动更新数据
mounted	组件初始化完成后	组件初始化阶段，在模板渲染之后	通过回调函数处理响应数据，并手动更新数据
computed	根据依赖数据计算得出属性值	依赖数据变化时自动重新计算，并触发请求	通过返回计算结果更新属性值
watch	监听数据的变化	被监听的数据变化时触发请求	通过回调函数处理响应数据，并手动更新数据

1. 使用 methods 发送请求：

methods: {
  fetchData() {
    axios.get('/api/data')
      .then(response => {
        // 处理响应数据
        this.data = response.data;
      })
      .catch(error => {
        // 处理错误
      });
  }
}

         这里使用 methods 中的 fetchData 方法，在需要的时候手动调用该方法发送请求，并在获取到响应数据后更新组件的 data 数据。

 2. 使用 mounted 发送请求：

mounted() {
  axios.get('/api/data')
    .then(response => {
      // 处理响应数据
      this.data = response.data;
    })
    .catch(error => {
      // 处理错误
    });
}

        在组件的 mounted 钩子函数中发送请求，以便在组件初始化完成后立即获取数据并更新组件。

3. 使用 computed 发送请求：

computed: {
  computedData() {
    axios.get('/api/data')
      .then(response => {
        // 处理响应数据
        return response.data;
      })
      .catch(error => {
        // 处理错误
      });
  }
}

        在 computed 属性中定义计算属性 computedData，每当依赖的数据发生变化时，自动触发请求并返回响应数据作为计算属性的值。

4. 使用 watch 发送请求：

watch: {
  watchedData(newValue, oldValue) {
    axios.get('/api/data')
      .then(response => {
        // 处理响应数据
        this.data = response.data;
      })
      .catch(error => {
        // 处理错误
      });
  }
}

        在 watch 中监听 watchedData 数据的变化，每当 watchedData 发生改变时，将触发请求并处理响应数据。

 在 Vue 组件中，可以通过以下几种方式调用 Vuex 中的 actions：

1、使用 mapActions 辅助函数将 actions 映射为组件的方法：

import { mapActions } from "vuex";

export default {
  methods: {
    // 将 "fetchData" 和 "updateData" actions 映射为组件的方法
    ...mapActions(["fetchData", "updateData"]),
    handleClick() {
      // 调用 "fetchData" action
      this.fetchData();
    },
  },
};

2、使用 this.$store.dispatch 方法调用 actions：

export default {
  methods: {
    handleClick() {
      // 调用 "fetchData" action
      this.$store.dispatch("fetchData");
    },
  },
};

3、直接在 actions 中调用其他 actions：

export default {
  actions: {
    fetchData({ commit, dispatch }) {
      // 异步请求数据
      // 在请求成功后调用 updateData action 更新数据
      dispatch("updateData", data);
    },
    updateData({ commit }, data) {
      // 更新数据
      commit("SET_DATA", data);
    },
  },
};

【注意】一般来说，

（1）如果需要在组件中调用多个 actions，使用 mapActions 可能更加合适；

（2）如果只需要调用一个 action，或者需要在 action 中调用其他 actions，使用 this.$store.dispatch 可能更加合适。

所以可以通过 this.$store.dispatch 来调用 Vuex 中的 actions，而不需要使用 mapActions 辅助函数将 actions 映射为组件的方法。因此，可以将原来使用 mapActions 映射的代码：

methods: {
  ...mapActions(["fetchUsers", "addUser"]),
  createUser() {
    this.addUser({ name: this.name, email: this.email });
    this.name = "";
    this.email = "";
  },
},

改为使用 this.$store.dispatch：

methods: {
  fetchUsers() {
    this.$store.dispatch("fetchUsers");
  },
  addUser() {
    this.$store.dispatch("addUser", { name: this.name, email: this.email });
    this.name = "";
    this.email = "";
  },
},

这样可以减少代码的复杂度，使代码更加简洁。注意，使用 this.$store.dispatch 调用 actions 时，需要传递一个包含 type 和 payload 属性的对象作为参数，其中 type 表示 action 的名称，payload 表示要传递给 action 的数据。