javascript - 从VueJS中的api获取数据时如何添加加载器？

Question

我创建了一个 VueJS/Vuex 应用程序来从 API 获取数据并将此数据显示在另一个页面上，该站点的逻辑是用户单击按钮以在first页面上获取数据但此数据必须显示在另一个页面上，

这是我的代码：

data.js

import axios from 'axios';

const state = {
    data: ''
};

const getters = {
    getData: (state) => {
        return state.data;
    }
};

const actions = {
    async fetchData({ commit }, { id }) {
        const response = await axios.get(`http://someUrl?id=${id}`);
        console.log(response.data);
        commit('setData', response.data);
    }
}

const mutations = {
    setData: (state, data) => (state.data = data)
}

export default {
    state, getters, actions, mutations
}

我要获取此数据的 Vue 文件：

<script>
  import FooterComponent from "@/components/Footers/Footer.vue";

  import { mapGetters, mapActions } from 'vuex';

  export default {
    data() {
      return {
        id: ""
      }
    },
    name: "Index",
    methods: {
      ...mapActions(["fetchData"]),
      launchFetchData() {
        this.fetchData({ id: this.id})
        this.$router.push("login");
      }
    },
    computed: mapGetters(["getData"])
  }
</script>

那么，如何通过状态检查数据是否已正确下载以及数据已正确下载时如何重定向到相应的页面？以及如何在下载数据时添加简单的加载器？

谢谢你的帮助

标签： javascripthtmlcssvue.jsvuex

Answer 1

我不确定，但你能试试这个吗？

<script>
  import FooterComponent from "@/components/Footers/Footer.vue";

  import { mapGetters, mapActions } from 'vuex';

  export default {
    data() {
      return {
        id: "",
        data: null
      }
    },
    name: "Index",
    methods: {
      launchFetchData() {
        try {
         ...mapActions(["fetchData"]),
        this.fetchData({ id: this.id})
        this.data = mapGetters(["getData"])
        this.$router.push("login");
        } catch (error) {
        console.log(error)
        }
      }
    },
   mounted() 
      this.launchFetchData()
  }
</script>