導入異步 function ES6 vuejs 和 TypeScript

Question

我正在嘗試使我的代碼更具可重用性，因此，我想將多個異步函數存儲到另一個文件中。

博客.ts

import db from '@/firebase/init'

async function getTags (uid) {
  const tags = db.collection('tags').where('blogId', '==', uid)
  const data = []
  await tags.get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        console.log(doc.data())
        data.push(doc.data().tag)
      })
      return data
    })
    .catch(err => {
      console.log('Error getting documents', err)
    })
}

export default getTags

另一個頁面.vue

<script>
import { getTags } from '@/functions/blog'

  mounted () {
    if (this.$route.params.blog) {
      this.blog = this.$route.params.blog
    }
    getTags(this.blog.uid)
}

返回錯誤

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Object(...) is not a function"

found in

---> <EditBlog> at src/components/admin/admin/Blog/EditBlog.vue
       <CreateBlog> at src/components/admin/admin/Blog/CreateBlog.vue
         <LayoutDefault> at src/App.vue
           <Root>

誰能指出如何正確導入這些功能的指南？

Answer 1

您在導入時嘗試使用命名導入，但將模塊設為默認導出。 要解決此問題，您只需import getTags from '@/functions/blog' 。

從技術上講，getTags 不是命名導出，而是默認導出。 如果您打算在一個文件中包含一堆函數，並且想要使用命名導出/導入，則只需從 function 中刪除default 。 現在您將能夠選擇要導入的內容，因為它們被命名為導出！ 有一個簡單的博客文章在這里很快就完成了

這就是具有多個命名導出（使用您的函數）的文件（blog.ts）的樣子。

export async function getTags (uid) {
  const tags = db.collection('tags').where('blogId', '==', uid)
  const data = []
  await tags.get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        console.log(doc.data())
        data.push(doc.data().tag)
      })
      return data
    })
    .catch(err => {
      console.log('Error getting documents', err)
    })
}

export async function getLaundry(uid) {
  //stuff
}

然后在你想要導入的文件中，假設你只想要getLaundry你可以這樣做：

import { getLaundry } from '@/functions/blog'

或者兩者都喜歡：

import { getLaundry, getTags } from '@/functions/blog'