過去 4 天我正在學習 Svelte，我正在嘗試將它與 Firebase 集成。
在用戶登錄后，我需要收聽一個以用戶 uid 命名的檔案，該檔案保存在可寫名稱 userStore 中。
注意：我的背景是 React，這可以通過 useEffect 輕松完成
我需要一種在 onDestroy 陳述句中呼叫 unsubscribe 的方法......我該怎么做？
onDestroy(() => {
unsubscribe();
});
這是我當前的代碼：
$: if ($userStore)
onSnapshot(doc(db, 'userInfo', $userStore.uid), (doc) => {
if (doc.data()) {
console.log(doc.data());
userInfoStore.set(doc.data() as UserInfo);
}
});
uj5u.com熱心網友回復：
我認為onSnapshot()回報unsubscribe，所以它應該像這樣作業
<script>
let unsubscribe
onDestroy(() => {
if(unsubscribe) unsubscribe();
});
$: if ($userStore) {
unsubscribe = onSnapshot(doc(db, 'userInfo', $userStore.uid), (doc) => {
if (doc.data()) {
console.log(doc.data());
userInfoStore.set(doc.data() as UserInfo);
}
});
}
</script>
用戶注銷時組件是否被破壞？因為如果用戶注銷應該呼叫取消訂閱？我認為在組件中可能不是處理邏輯的最佳位置。這將是通過自定義商店的一種方式
userInfoStore.js
export const userInfoStore = (() => {
const initialValue = {}
const {subscribe, set} = writable(initialValue)
let unsubSnapshot
return {
subscribe,
startListener(uid) {
unsubSnapshot = onSnapshot(doc(db, 'userInfo', uid), (doc) => {
if (doc.data()) {
console.log(doc.data());
set(doc.data() as UserInfo);
}
});
},
stopListener() {
if(unsubSnapshot) unsubSnapshot()
}
}
})();
auth.js
onAuthStateChanged(auth, user => {
if(user) {
userStore.set(user)
userInfoStore.startListener(user.uid)
}else {
userInfoStore.stopListener()
}
})
App.svelte（主要組件）
不知道這有多重要，或者當頁面關閉時偵聽器是否仍然停止
<script>
import {onDestroy} from 'svelte'
import {userInfoStore} './userInfoStore'
onDestroy(() => {
userInfoStore.stopListener()
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/484125.html