axios 如何在Vue3 SPA中仅从API获取一次数据(在应用程序创建、外部组件或视图时)，并使用Pinia商店

mccptt67 于 2023-01-13 发布在 iOS

关注(0)|答案(2)|浏览(137)

每次加载路由器视图或安装组件时，是否可以避免从API获取数据，这是否是一种好的做法？
问题是有些数据很少改变（比如下拉选项列表，想象一下我的应用程序允许选择的动物），逻辑上不需要每次都向服务器发送请求，而是在应用程序创建时就足够了。
在App.vue中试用，这是常见的事情吗？
在应用程序版本中

import { computed, onMounted, onUpdated, ref } from 'vue';
onMounted(()=>{
axios.get('/data')....

.then((res)=>{
store.property = res.data
...
})

})

axios

来源：https://stackoverflow.com/questions/75055985/how-to-get-data-from-an-api-only-once-on-app-creation-outside-component-or-vie

2条答案

按热度按时间

e1xvtsh31#

我认为在App.vue组件中挂载它是可以接受的，因为应用程序组件不会被重新挂载。
然而，理想的设置取决于一些其他参数，如应用程序的大小和维护它的团队的大小。在大型应用程序中，您可能希望以更结构化和一致的方式组织内容，以便您和其他代码工作人员知道在哪里可以找到内容。
您可以考虑将API调用移到pinia操作中。

store.loadMyData()

// instead of

axios.get('/data')
  .then((res)=>{
    store.property = res.data;
  })

这样组件中的代码行就更少了。拥有“精益”组件并将“业务逻辑”移出组件通常会使组织更好，从而更容易维护。
在操作中，您可以跟踪API的状态

const STATES = {
  INIT: 0,
  DONE: 1,
  WIP: 2,
  ERROR: 3
}
export const useMyApiStore = defineStore('myapi', {
  state: () => ({
    faves: [],
    favesState: STATES.INIT
  }),
  actions: {
    loadMyData() {
      this.store.favesState = STATES.WIP;
      axios.get('/data')
        .then((res) => {
          this.store.property = res.data;
          this.store.favesState = STATES.DONE;
        })
        .catch((e) => {
          this.store.favesState = STATES.ERROR;
        })
    },
  },
  getters: {
    isLoaded(){
      return this.store.favesState === STATES.DONE;
    }
    isLoading(){
      return this.store.favesState === STATES.WIP;
    }
  }
})

显然，这是比较冗长的，但是允许组件更小，包含更少的逻辑，然后，例如，在您的组件中，您可以使用getter isLoading来显示加载指示器，或者在另一个组件中使用isLoaded来确定是否显示它。

赞(0）回复(0）举报 2023-01-13

eqoofvh92#

是，这是将一些数据加载到Vue应用程序中的常用方法。
您还可以在beforeMount()或created()生命周期挂钩中的Mounting之前加载数据（参见Vue生命周期图），以防止不必要的HTML更新。

赞(0）回复(0）举报 2023-01-13