如何在 VueJS 应用程序上使用导出的函数？

Question

I'm using the Firebase to make users' auth, the Firebase service is works fine. I'm newbie with it and I want delegate the Firebase's services to a class, or file, or module (I don't know exactly the correct way). So I created a Settings.vue module to collect data and a UserService.js to make the work, communicate with Firebase and store locally using Vuex, and return success or fail, and when return get the data from state (Vuex) using computed on Settings.vue . At the moment this is my files:

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);
    })
}

So, when I run it I receive the follow message:

 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

You can export your function in UserService.js

try to add this code in UserService.js

export default {
  updateDisplayName,
  updatePassword
}