VueJS Ionic Framework 및 ViteJS를 사용하는 MongoDB Realm 소개, Composition API로 애플리케이션 상태 리팩터링

MongoDB Realm Web SDK을 사용하면 브라우저 기반 애플리케이션이 MongoDB Atlas에 저장된 데이터에 액세스하고 기능 및 인증과 같은 MongoDB Realm 서비스와 상호 작용할 수 있습니다. 웹 SDK는 JavaScript 및 TypeScript 애플리케이션을 모두 지원합니다.



이 짧은 비디오에서는 상태 관리자에 vuex와 같은 것을 사용하는 대신 Realm 및 Mongodb와 관련된 애플리케이션 상태를 별도의 구성 함수로 리팩토링합니다. 우리는

현재 Ionic 애플리케이션에서 sqlite를 대신하여 로컬 데이터베이스에 쓰기 위한 솔루션은 없습니다. 일부 사람들이 플러그인을 구축하기 시작한 것 같지만 너무 멀리 가지 않았습니다.

우리는 Vuejs을 사용하여 응용 프로그램을 구축하고 있으며, ViteJS을 사용하여 패키징 및 개발 중이며 UI 구성 요소는 Ionic Framework에서 가져온 것입니다.

// realm-state.ts
import * as Realm from "realm-web";
import { computed, ref } from "vue";

const user = ref<any>(null);

// get app instance
const app = Realm.getApp("application-vue-1-afmqh");
user.value = app?.currentUser;

export const useAppState = () => {
  const isLoggedIn = computed(() => user.value !== null);

  /**
   *
   */
  const login = async (email: string, password: string) => {
    const credentials = Realm.Credentials.emailPassword(email, password);
    await app.logIn(credentials);

    // Refresh a user's custom data to make sure we have the
    // latest version
    await app?.currentUser?.refreshCustomData();

    //assign logged in user
    user.value = app?.currentUser;

    return true;
  };

  /**
   *
   * @returns
   */
  const logout = async () => {
    await app.currentUser?.logOut();
    //assign logged in user
    user.value = null;
    return true;
  };

  const createAccount = async ({
    email,
    password,
    first,
    last,
  }: {
    email: string;
    password: string;
    first: string;
    last: string;
  }) => {
    // Create user
    await app.emailPasswordAuth.registerUser(email, password);

    // Authenticate the user
    await app.logIn(Realm.Credentials.emailPassword(email, password));

    // save profile information
    const mongodb = app?.currentUser?.mongoClient("mongodb-atlas");
    const collection = mongodb?.db("vue-db1").collection("profile");

    const resp = await collection?.insertOne({
      userID: app?.currentUser?.id,
      first,
      last,
    });

    // Refresh a user's custom data to make sure we have the latest version
    await app?.currentUser?.refreshCustomData();

    //assign logged in user
    user.value = app?.currentUser;

    return app.currentUser;
  };

  return {
    isLoggedIn,
    user,
    // functions
    login,
    logout,
    createAccount,
  };
};