Vue 3에 대한 간단한 전역 상태 관리 작성

간단한 전역 상태를 관리하고 Vuex를 사용하고 싶지 않다면 Vue 3 Composition API의 reactive 및 toRefs 속성을 사용하여 자체 경량 상태 관리를 구성할 수 있습니다.

상태 논리를 포함할 useTodos 후크를 작성하여 시작할 수 있습니다.

// store/todos.js
import { reactive, toRefs } from "vue";

const url = 'https://jsonplaceholder.typicode.com/todos';

const state = reactive({
    todos: [],
    loading: true,
    selectedTodo: null
});

export default function useTodos() {
    const fetchTodos = async () => {
        state.loading = true;
        state.todos = await (await fetch(url)).json();
        state.loading = false;
    }

    return {
        ...toRefs(state), // convert to refs when returning
        fetchTodos
    }
}

위 코드에서 초점 영역은 reactive 및 toRefs 속성입니다.

문서의 reactive 속성은 개체를 가져와 원본의 반응 프록시를 반환합니다. 이것은 2.xVue.observable()와 동일합니다.
toRefs 속성은 reactive 객체를 일반 객체로 변환하고 소비하는 구성 요소가 반응성을 잃지 않고 구성 함수( useTodos )에서 반환된 객체를 분해/확산할 수 있도록 합니다.

다음으로 소비 구성 요소App.vue로 이동하여 구성 기능을 가져올 수 있습니다.

앱뷰

<template>
  <h1 v-if="loading">Loading...</h1>
  <div v-else>
    <SelectedTodo />
    <ul>
      <li v-for="t in todos" :key="t.id" @click="selectedTodo = t">{{t.title}}</li>
    </ul>
  </div>
</template>

<script>
import { onMounted } from "vue";
import useTodos from "./store/todos";
import SelectedTodo from "./components/SelectedTodo.vue";

export default {
  name: "App",
  components: { SelectedTodo },
  setup() {
    const { todos, fetchTodos, selectedTodo, loading } = useTodos();

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

    return {
      todos,
      selectedTodo,
      loading,
    };
  },
};
</script>

SelectedTodo.vue

<template>
  <pre>
    {{ JSON.stringify(selectedTodo, undefined, 4) }}
  </pre>
</template>

<script>
import useTodos from "../store/todos";

export default {
  setup() {
    const { selectedTodo } = useTodos();

    return {
      selectedTodo,
    };
  },
};
</script>

App.vue에 작성한 내용을 분석해 보겠습니다.

먼저 구성 함수를 가져와서 구조화하고 반환하여 나머지 구성 요소에서 사용할 수 있도록 했습니다.
onMounted 수명 주기 메서드는 할 일을 가져오는 데 사용되었으며 결과를 순서 없는 목록에 표시합니다. 각 항목은 클릭할 수 있으며 selectedTodo 상태 값을 선택한 항목으로 설정합니다.

마지막으로 SelectedTodo.vue 속성이 반응적임을 보여주기 위해 selectedTodo 구성 요소를 만들었습니다.

아마도 여기서 가장 흥미로운 부분은 우리가 다른 구성 요소에서 후크를 재사용할 수 있고 우리 상태의 모든 업데이트를 얻을 수 있다는 것입니다.

읽어 주셔서 감사합니다!

표지 사진 by @adigold1 on Unsplash