Harlem을 사용한 Vue 3 상태 관리

안녕하세요 여러분

최근에 Vue 3를 사용하여 구축한 Ocula이라는 날씨 앱을 공유했습니다. 오늘 저는 Ocula 에서 탄생한 다른 프로젝트를 발표하고 싶습니다. 프로젝트 이름은 Harlem 입니다.

Harlem Vue 3의 새로운 상태 관리 솔루션은 직관적이고, 가볍고, 변경 불가능하고, 확장 가능한 것을 목표로 합니다. 사용하지 않는 기능에 대한 번들 크기의 초기 비용을 발생시키지 않고 필요할 때 확장할 수 있는 간단한 상태 관리 솔루션을 원했기 때문에 Harlem 작성했습니다. 이를 달성하기 위해Harlem는 2가지 범주로 나뉩니다.

코어 패키지

핵심 기능을 확장하는 플러그인

핵심 패키지는 저장소를 만들고 상태/게터/변이를 사용하여 해당 저장소와 상호 작용함으로써 애플리케이션에서 상태를 관리하기 위한 멋진 기능적 API를 제공합니다. Harlem을 사용하여 간단한 저장소를 만드는 방법의 예를 살펴보겠습니다.

// store.ts

import {
    createStore
} from '@harlem/core';

const STATE = {
    firstName: 'John',
    lastName: 'Smith'
};

export const {
    state,
    getter,
    mutation,
    on,
    once
} = createStore('user', STATE);

createStore 함수는 이제 상태와 안전하게 상호 작용하는 데 필요한 모든 메서드를 반환합니다. 기본적으로 상태에 대한 모든 액세스는 변경할 수 없으며 돌연변이를 통해서만 수정할 수 있습니다. 이 불변성은 상태 변경을 예측 가능하고 (가장 중요하게는) 감사할 수 있도록 합니다.

이제 상점이 생성되었으므로 이름과 성을 결합하여 사용자의 전체 이름을 출력하는 간단한 getter를 정의해 보겠습니다.

// getters.ts

/*
The state parameter here is immutable and cannot be assigned to.
*/
export const fullName = getter('fullname', state => `${state.firstName} ${state.lastName}`);

이름과 성을 업데이트하기 위한 몇 가지 변형도 정의해 보겠습니다.

// mutations.ts

/*
The <string> generic tells harlem that we are expecting a payload of type string. This is optional and only applicable to TypeScript.

It's also worth noting that the state parameter here is the only place in Harlem that state is mutable.
*/

export const setFirstName = mutation<string>('setFirstName', (state, payload) => {
    state.firstName = payload ?? '';
});

export const setLastName = mutation<string>('setLastName', (state, payload) => {
    state.lastName = payload ?? '';
});

그게 전부입니다. 이제 Vue 구성 요소로 가져올 수 있는 관리 상태가 있습니다. 다음은 구성 요소에서 위의 저장소를 사용하는 방법에 대한 간단한 예입니다.

<template>
    <div class="app">
        <h1>Hello {{ fullName }}</h1>
        <input type="text" v-model="firstName" placeholder="First name">
        <input type="text" v-model="lastName" placeholder="Last name">
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    computed
} from 'vue';

import {
    state,
    fullName,
    setFirstName,
    setLastName
} from './stores/user';

export default defineComponent({

    setup() {
        const firstName = computed({
            get: () => state.firstName,
            set: setFirstName
        });

        const lastName = computed({
            get: () => state.lastName,
            set: setLastName
        });

        return {
            firstName,
            lastName,
            fullName
        };
    }

});
</script>

여기에서 플러그인을 사용하여 Harlem을 확장하여 Vue devtools integration , server-side rendering , storage sync , transactions , snapshots 및 resetting 을 포함할 수 있습니다.

Harlem 설치 방법, 사용 가능한 플러그인 목록 또는 자체 플러그인 작성 및 게시 방법을 보려면 repo으로 이동하십시오. 또는 harlemjs.com으로 이동하여 라이브 데모를 볼 수 있습니다.

읽어주셔서 감사합니다. 행복한 코딩을 하세요!