Open2

Vue 3 Composition API

useDoor

表示非表示の状態を管理するときに必要なopenとcloseを同時に定義する。
扉みたいなのでDoor(扉)という表現にしてみました。

import { Ref, ref } from "vue";

/**
 * 閉じたり開いたりする
 * @example ```
 * const [modal, openModal, closeModal] = useDoor();
 *
 * // モーダルの閉じるボタンを押した時
 * const onClickExitButton = () => closeModal()
 * ```
 */
export const useDoor = (
  initial = false
): [Ref<boolean>, () => void, () => void] => {
  const door = ref(initial);
  const open = () => {
    door.value = true;
  };
  const close = () => {
    door.value = false;
  };
  return [door, open, close];
};

似たHooks

useToggle https://vueuse.org/shared/useToggle/

useFirebaseAuth

Firebaseの認証状態をhooksの形で取得する。
'loading' | 'sign-out' | 'sign-in'の形で返すstateの部分と、
認証が確認できたらそのユーザー情報を保持するuserをオブジェクトで返します。

npmにて利用できます

https://github.com/HikaruEgashira/useFirebaseAuth
import { ref, onMounted } from 'vue-demi';
import firebase from 'firebase';

export function useFirebaseAuth(auth: firebase.auth.Auth) {
  const user = ref<firebase.User | null>(null);
  const state = ref<'loading' | 'sign-out' | 'sign-in'>('loading');

  const update = (firebaseUser: firebase.User | null) => {
    user.value = firebaseUser;
    state.value = firebaseUser ? 'sign-in' : 'sign-out';
  };
  const unsubscribe = () => auth.onAuthStateChanged(update);

  onMounted(() => {
    unsubscribe();
  });

  return {
    user,
    state,
  };
}
ログインするとコメントできます