vue3 ref函数

Posted 2023-03-19

参考技术A 我们知道，在 vue3.0 引入了 composition API , setup 函数是其核心函数

在 setup 函数中，可以使用 ref 函数，用于创建一个响应式数据，当数据发生改变时， Vue 会自动更新 UI
例如：使用 ref 函数定义一个变量 count

然后在组件中引入该模块：import useChangeCount from "./composition_tiny_js/count"
并且在组件的 setup 中使用，并通过 return 的形式将外界需要用到的变量和函数暴露出去

这样上面暴露的 count 变量, change_count 方法就可以在外界使用了

需要注意的是：

以上就是 ref 函数的基本使用！

Firebase 9 和带有 Vue 组合的 ref 函数

【中文标题】Firebase 9 和带有 Vue 组合的 ref 函数

【英文标题】：Firebase 9 and ref function with Vue composition

【发布时间】：2022-01-10 16:54:30

【问题描述】：

我想将图像上传到 firebase 存储，版本 9。我有适用于 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

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 ;

【参考方案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

也结帐：How to import two classes by the same name in javascript/es6?