如何在 VueJS 應用程序上使用導出的函數？

Question

我正在使用 Firebase 進行用戶身份驗證，Firebase 服務運行良好。 我是它的新手，我想將 Firebase 的服務委托給一個類、文件或模塊（我不知道正確的方法）。 所以我創建了一個Settings.vue模塊來收集數據和一個UserService.js來完成工作，與 Firebase 通信並使用 Vuex 在本地存儲，並返回成功或失敗，並在返回時使用計算從狀態（Vuex）獲取數據Settings.vue 。 目前這是我的文件：

Settings.vue

<template> ... </template>

<script>
import UserService from "@/services/UserService";

export default {
  name: "Settings",
  mounted() {},
  methods: {
    saveDisplayName() {
      UserService.updateDisplayName(this.displayName).then(function(retorno) {
        console.log("Returning: " + retorno);
      });
    }
  },
  data() {
    return {
      displayName: '',
      password: ''
    };
  }
};
</script>

UserService.js

import firebase from 'firebase'

var updateDisplayName = function (displayName) {
    return new Promise(function (resolve, reject) {
        var user = firebase.auth().currentUser;
        console.log("updateDisplayName")
        setTimeout(function () { resolve("resolved! " + displayName) }, 3000);
    })
}

var updatePassword = function (password) {
    return new Promise(function (resolve, reject) {
        var user = firebase.auth().currentUser;
        console.log("updatePassword")
        setTimeout(function () { resolve("resolved! " + password) }, 3000);
    })
}

因此，當我運行它時，我收到以下消息：

 WARNING  Compiled with 1 warnings                                                                              11:54:41 PM

 warning  in ./src/views/Settings.vue?vue&type=script&lang=js&

"export 'default' (imported as 'UserService') was not found in '@/services/UserService'

Answer 1

您可以在UserService.js導出您的函數

嘗試在UserService.js添加此代碼

export default {
  updateDisplayName,
  updatePassword
}