在Vuejs中渲染组件之前获取数据

Question

我将 Vuejs 与 Vuex 结合使用，并且有用于从数据库获取数据的操作，我希望在渲染依赖于该数据的组件之前进行获取。那么我可以将这些操作放在代码中的什么位置呢？

Answer 1

您可以在 onMounted 挂钩上使用您的操作（例如：getData），并且可以使用异步等待来确保您的操作调用在进入下一步之前完成

这是一个例子（我使用 axios 只是为了例子，你可以自由地使用任何方法来获取你的数据）：

<template>
  <h1>My component</h1>
</template>

<script>
  import axios from 'axios'

  export default {

    name: 'MyComponent',

    setup() {
      const baseUrl = 'your-api-base-url'

      const apiClient = axios.create({
         baseURL: baseUrl,
         withCredentials: false,
         headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json',
         },
      })

      const getData = async() => {
         try {
            return await apiClient.get('/api-path', {}) // here i call my 
              api to get data you can call your function
         } catch (error) {
            throw new Error(error)
         }
      }

      onMounted(() => {
        getData()
      })
    }
   }
 </script>

Answer 2

已安装/安装前创建

在 Vuejs 3 上，你有 onMounted https://vuejs.org/api/