To-Do 앱: Vuex의 대안으로 Composition API

소규모 프로젝트의 경우 새로운Anthony Gore's article을 Vuex 대신 사용하는 방법에 대한Composition API을 읽은 후 Codepen에서 빌드한simple todo app을 가져온 다음 새로운 Vue 3 앱(vue cli 사용)을 만들었습니다. ) 그리고 마지막으로 각 구성 요소의 모든 상태 및 돌연변이 메서드를 하나의 단일 파일(global.js - Vuex에서 저장소와 같은 것임)로 옮겼습니다.

소스 코드 및 머리말

다음은 이 기사에서 참조할 소스 코드 및 Codepen 목록입니다.

코드펜: Vue To-do app

GitHub 저장소: todo-app-vue3

Netlify: https://relaxed-yonath-fa8475.netlify.app/

Codepen에서 내가 만든 todo 앱을 살펴보면 Vuex를 사용하지 않고 있다는 것을 알 수 있습니다. 저는 props을 사용하여 데이터를 어린이에게 전달하고 $emit을 사용하여 데이터를 전달합니다. 상위 구성 요소와 통신합니다.

새로운 Composition API의 장점 중 하나는 이제 매우 강력한 구성 요소 외부의 반응 기능에 액세스할 수 있다는 것입니다.

Vue 3 앱을 만들고 구성 요소 코드를 자체 파일에 넣고 기본적으로 Codepen에서 작동하는 것처럼 앱이 작동하도록 만든 후 수행한 작업은 다음과 같습니다.

상태 및 돌연변이 기능을 전역 파일로 이동

가장 먼저 한 일은 /src 에 global.js 파일을 만드는 것이었습니다.


global.js 내부에서 reactive 및 readonly API를 가져왔습니다. 'global.js'의 코드를 살펴보겠습니다. 코드 스니펫에 주석을 추가하겠습니다.

import { reactive, readonly } from "vue";

/* 
Wrapping our object with reactive() makes, 
as it clearly suggests, our object reactive 
(it even affects all nested properties).
*/

const state = reactive({
  tasks: [
     {
      id: 1,
      description: "Finish the course",
      done: false,
     }, 
     {..}, 
     {..}, 
     {..}, 
     {..}
  ],
  nextId: 6,
  tasksFiltered: [],
  activeTab: "all",
})

/* 
All these functions below are a combination of
mutations and actions (when comparing with Vuex).
But, of course, we are always free to organize our code
however we want.
*/

const filterTodos = function(filterOption) {..}

const addTodo = function(todo) {..}

const deleteTask = function(task) {..}

const toggleTaskStatus = function(task) {..}

// Export an object with the state and mutations
export default { 
  // With readonly(), we prevent our state to be mutated
  // outside of the global.js module
  state: readonly(state), 
  filterTodos, 
  addTodo, 
  deleteTask, 
  toggleTaskStatus
}

제공/주입 사용

그런 다음 모든 global.js 자식 구성 요소에 액세스할 수 있는 App.vue("사용자 지정 저장소")를 만들어야 합니다. 그렇게 하려면 모든 하위 구성 요소에서 provide를 사용할 수 있도록 App.vue 내부의 global.js 속성을 사용해야 하므로 global.js에서 App를 가져온 다음 제공합니다.



그 직후, 각 구성 요소에서 사용하려면 inject global가 필요합니다.



이제 각 하위 구성요소의 스크린샷입니다(하지만 언제든지 저장소로 이동하여 코드를 살펴볼 수 있음을 기억하세요).

TodoList.vue

Form.vue

헤더.vue

이 접근 방식은 개선될 수 있으며 더 간단한 대안이 될 수 있습니다. 물론 Vuex는 디버깅이 더 쉽고 vue 개발 도구에서 변형을 추적할 수 있습니다. 그래서 그것은 항상 우리가 작업하고 있는 프로젝트나 개인적인 선택과 관점에 달려 있습니다.

이 접근법에 대해 어떻게 생각하십니까?
의견 있으십니까?

이 기사가 도움이 되었기를 바랍니다. 🙂