Firebase 9 和 ref 函数与 Vue 组合

Question

我想将图像上传到版本 9 的 firebase 存储。我有 firestore 的工作代码，但我无法理解有关上传的 firebase 文档，以及如何使其适用于 Vue (这还需要导入 REF 函数）。

我的问题是：如何在 Vue 中导入 ref 函数并从 firebase firestore 导入和使用 ref 函数？

这就是我的。用 .value 包裹 Firebase ref 感觉不对，但我只是把它放在那里以克服 vue 错误。

vue 组件代码片段：<-- 这个有效

if (imageFile.value) {
        await uploadImage(imageFile.value);
        console.log("image:" + url.value);
      }

useStorage.js <--这就是尝试从 Firebase 8 转换到 9 时一切都崩溃的地方。是 vue Ref 函数吗？

import { ref } from "vue";
import { projectStorage } from "../firebase/config";
import { uploadBytesResumable, getDownloadURL } from 
"@firebase/storage";


const useStorage = () => {
const error = ref(null);
const url = ref(null);
const filePath = ref(null);
  
 //I need to use ref with firestore here
 const uploadImage = async (file) => {
    filePath.value = `images/${file.name}`;
    const storageRef = ref(projectStorage, 
  filePath.value).value;


   try {
     const res = await storageRef.put(file);
     url.value = res.ref.getDownloadURL();
   } catch (err) {
     console.log(err.message);
     error.value = err.message;
   }
 };

return { url, filePath, error, uploadImage };
};

export default useStorage;

config.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  [info]
};

// init firebase
const firebaseApp = initializeApp(firebaseConfig);

// init firestore service
const db = getFirestore(firebaseApp);

// init firestore authorization
const auth = getAuth(firebaseApp);


const projectStorage = getStorage(firebaseApp);



export { db, projectStorage, auth };

Answer 1

您可以为任一导入设置别名，如下所示：

import { ref } from "vue";
import { projectStorage } from "../firebase/config";
import { ref as storageRef } from "@firebase/storage";


const fileRef = storageRef(projectStorage, filePath.value);
// use storageRef here ^^^ instead of ref from vue

同时结帐：

Firebase 9 和 ref 函数与 Vue 组合

Firebase 9 and ref function with Vue composition

javascript

firebase

vue.js

firebase-storage