Vuex 대신 Composition API를 사용해야 합니까?

Composition API는 Vue 구성 요소와 인스턴스에서 반응 데이터를 방출하여 JavaScript 객체처럼 전달합니다.이것은 전체적인 반응 상태라는 뚜렷한 응용이 있다.이를 위해서는 Vuex가 무엇을 해야 합니까?
이 문서에서는 Vuex를 Composition API의 기능으로 교체하는 방법을 보여 드리며 이것이 현명한 생각인지 설명해 드리겠습니다.
주: 본고는 최초로 2020/10/04here on the Vue.js Developers blog에 발표되었다.

If you want to brush up on the concepts of Vuex, first read WTF is Vuex? A Beginner's Guide To Vue's Application Data Store. And if you aren't familiar with the Vue Composition API, you can learn about that here.

작성된 API가 있는 전역 반응 상태
Vuex가 존재하는 주요 원인은 Vue 응용 프로그램의 전역 반응 상태를 허용하기 때문이다.이것이 없으면 구성 요소 인터페이스 (즉 도구/이벤트) 를 통해서만 로컬 구성 요소 상태를 공유할 수 있습니다.5층 중 4층 구성요소에서 도구와 사건을 전달하는 것은 Vue 사용자들에게 익숙한 고역이다.
그러나 Composition API(Vue 3 패키지)는 구성 요소 외부(사실상 Vue 응용 프로그램 외부)에서 독립적인 반응 변수를 만들 수 있도록 합니다.예를 들어, 모듈 파일을 만들어서 반응 변수를 내보내고, 그 모듈을 사용하고자 하는 모든 구성 요소로 가져올 수 있습니다.

DIY Vuex 및 작성 API
Composition API를 사용하여 자체 Vuex를 출시하는 방법을 살펴보겠습니다.우선, 전역 상태 변수를 설명하고 내보낼 파일을 만들 것입니다.
전체 응용 프로그램에서 이 계수 값을 사용하고 싶다면 reactive 방법으로 값 count 을 가진 상태 대상을 만듭니다.
전 세계.js

import { reactive } from "vue";

const state = reactive({
  count: 0
});

export default { state };

Vuex 모드
Vuex 문서에서 말했듯이 Vuex는 모델이자 라이브러리입니다.상태를 예측할 수 있도록 하기 위해서는 변수가 직접적으로 변이할 수 없다는 것이 중요하다.
DIY Vuex에서 쉽게 구현할 수 있습니다.우리는 readonly 방법으로 상태의 읽기 전용 복사본을 만들 것이다.우리는 또한 사용자가 이 방법을 사용하여count의 값을 변경할 수 있는 방법increment을 제공할 것이다(이것은 Vuex 돌변과 유사하다).
전 세계.js

import { reactive, readonly } from "vue";

const state = reactive({
  count: 0
});

const increment = function () {
  state.count++;
}

export default { state: readonly(state), increment };

사용 제공/주입 설치 상점
우리 DIY Vuex 스토어를 사용하는 가장 간단한 방법은 제공/주입 기능을 사용하는 것입니다.따라서 모든 하위 구성 요소가 사용할 수 있도록 프로그램의 루트 실례에서 이 모듈을 가져온 다음 provide 가져옵니다.
src/main.js

import { createApp } from "vue";
import global from "@/global";

const app = createApp({
  provide: {
    global
  },
  ...
}

이제 inject를 사용하여 액세스할 수 있습니다.
src/components/MyComponent.vue

<template></template>
<script>
export default {
  inject: ["global"]
}
</script>

이제 상태 값 및 방법을 사용할 수 있습니다.
src/components/MyComponent.vue

<template>
  <div>{{ global.state.count }}
  <button @click="global.increment">Increment</button>
</template>
<script>
export default {
  inject: ["global"]
}
</script>

그래서 Vuex를 버려야 하나요?
Composition API를 사용하여 자체 Vuex를 출시하는 방법에 대해 잘 알고 있습니다.이렇게 함으로써 우리는 Vuex에 대한 불평을 많이 극복했다. 왜냐하면 우리는 다음과 같은 불평이 있기 때문이다.

최소 샘플

'돌변','제출'등 심오한 명칭이 없음

기타 의존항이 없습니다.

그럼 왜 아예 Vuex를 버리지 않았을까요?

Vuex 1의 이점: 디버깅
비록 우리가 전역 반응 상태 메커니즘을 복제했지만, Vuex의 큰 장점은 디버깅 기능이다. 우리는 복제하지 않았다.
먼저 Vuex를 사용하여 모든 돌연변이를 추적하여 Vue Devtools에서 어떤 구성 요소가 상태를 바꾸었는지, 어떻게 상태를 바꾸었는지 볼 수 있습니다.
그 다음으로 여행 테스트도 할 시간이 있다.이것은 Vuex의 기능으로 응용 프로그램의 이전 상태를 선택할 수 있습니다.

Vuex 2의 이점: 플러그인
Vuex의 또 다른 장점은 plugin ecosystem입니다.예를 들어 vuex 영구화 상태 플러그인은 응용 프로그램 상태를 로컬 저장소로 영구화할 수 있으며, Vue 공유기 플러그인은 현재 루트 데이터를 동기화하는 데 사용됩니다.
모든 기존 플러그 인은 콤보 API 유틸리티로 복제할 수 있지만 Vuex의 표준화된 구조가 없으면 플러그 앤 플레이가 되지 않습니다.

결론
작은 프로젝트에서Composition API를 사용하여 전역 반응 상태를 위한 간단한 모듈을 만드는 것은 무해하거나, 어떠한 비용도 피하는 것이 정말 중요하다면.
그러나 Vuex의 디버깅 기능은 여전히 이를 대규모 Vue 응용 프로그램 개발의 중요한 도구로 만들었기 때문에 나는 이런 상황에서 내가 그것을 사용하지 않을 것이라고 상상할 수 없다.
기대하다.

한층 더 읽다

Do React Hooks Replace Redux?

이 문장을 좋아합니까?
Vue를 통해 매주 받은 편지함에서 비슷한 글을 더 많이 얻을 수 있습니다.js 개발자 통신.
Click here to join!