如何通过Vuex的actions使用api的结果

// store.js
import axios from 'axios';

const actions = {
  async fetchData({ commit }) {
    try {
      const response = await axios.get('api-url'); // 调用API获取数据
      const data = response.data; // 获取API返回的数据
      commit('setData', data); // 提交mutation将数据保存到state中
    } catch (error) {
      console.error(error);
    }
  }
};

export default actions;

// MyComponent.vue
<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

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

export default {
  methods: {
    ...mapActions(['fetchData']), // 将fetchData方法映射到组件的methods中
    async fetchDataFromApi() {
      await this.fetchData(); // 调用fetchData方法获取数据
      // 在这里可以使用this.$store.state中的数据
    }
  },
  mounted() {
    this.fetchDataFromApi(); // 在组件挂载时调用fetchDataFromApi方法
  }
};
</script>

// store.js
const mutations = {
  setData(state, data) {
    state.data = data; // 将API返回的数据保存到state中
  }
};

export default mutations;

// store.js
const state = {
  data: null // 初始化数据为null
};

export default state;