Vuex는 언제 사용해야 합니까?

Vuex는 언제 사용해야 합니까?

이제 vue를 배우기 시작하고 데이터베이스 편집용 SPA를 만듭니다.Vuex를 어디에 사용해야 하는지 모르겠습니다.소품도 쓸 수 있고$emit필요한 파라미터를 찾을 수 있습니다.어떤 경우에 Vuex를 사용해야 합니까?

Vueose 블로그에 따르면

Vue.js 2.6은 몇 가지 새로운 기능을 도입했으며, 제가 정말 좋아하는 기능 중 하나는 새로운 글로벌 관찰 가능한 API입니다.

이제 Vue.js 구성 요소 범위를 벗어나 사후 대응 개체를 생성할 수 있습니다.또한 컴포넌트에서 이러한 컴포넌트를 사용하면 렌더 업데이트가 적절히 트리거됩니다.

이렇게 하면 Vuex 없이도 매우 간단한 저장소를 생성할 수 있으므로 구성 요소 간에 외부 상태를 공유해야 하는 경우와 같은 간단한 시나리오에 적합합니다.

이 팁 예제에서는 상태를 자체 스토어로 외부화하는 단순 카운트 기능을 구축합니다.

먼저 store.js를 만듭니다.

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

돌연변이 및 동작에 대한 개념이 편안하다면 데이터를 업데이트하는 일반 함수를 만드는 것만으로 해당 패턴을 사용할 수 있습니다.

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

이제 컴포넌트에서만 사용하면 됩니다.Vuex에서와 같이 상태에 액세스하려면 계산된 속성과 돌연변이에 대한 방법을 사용합니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="setCount(count + 1);">+ 1</button>
    <button @click="setCount(count - 1);">- 1</button>
  </div>
</template>

<script>
  import { store, mutations } from "./store";

  export default {
    computed: {
      count() {
        return store.count;
      }
    },
    methods: {
      setCount: mutations.setCount
    }
  };
</script>

Vuex(Vue의 Redux 버전)를 사용하는 주된 목적은 상태(또는 데이터) 관리입니다.평신도의 표현으로 말하면, 데이터의 단일 출처를 가지고 있는 것입니다.

응용 프로그램의 다른 부분이 현재 구성 요소의 데이터와 동기화 상태를 유지할 수 있도록 데이터가 변경될 때 이벤트를 내보내는 일반적인 패턴에 반대합니다.

특정 컴포넌트 하나가 데이터를 직접 변경할 수 있도록 하는 것이 아니라 변경 내용을 개별 모듈(스토어)에 위임합니다.해당 데이터를 사용하는 모든 구성 요소는 변경에 대해 통지됩니다.이는 일반적인 송신 패턴이 주기적인 업데이트 루프를 발생시킬 위험이 있는 복잡한 애플리케이션에서 매우 유용합니다.

Redux 패턴을 사용하는 앱의 이점은 다음과 같습니다.

• 결과의 예측 가능성,
• 테스트의 용이성
• 코드 유지 보수성과 확장성
• 관심사의 분리
• 디버깅의 용이성(시간 이동: 디버깅을 위해 특정 변경을 실행 취소 또는 재생하는 기능).

즉, 복잡한 코드, 데이터 또는 앱 동작을 훨씬 쉽게 이해하고 수정할 수 있기 때문에 개발자에게 제어와 자신감을 줍니다.

---

다른 패턴(또는 시스템 또는 도구)과 마찬가지로 Redux 패턴도 과도하게 사용될 수 있습니다.한 컴포넌트에서만 사용되는 데이터는 저장소에서 보관할 필요가 없습니다.다른 컴포넌트는 해당 데이터의 변경에 대해 알 필요가 없으므로 이를 사용하여 컴포넌트에서 관리해야 합니다.

Vuex를 사용하면 데이터를 모듈로 정리할 수 있으므로 모든 것을 깔끔하고 유지 관리할 수 있습니다.

마지막으로 Redux 패턴을 사용하는 가장 유용한 이점 중 하나는 SSR(서버 측 렌더링) 구현을 쉽게 할 수 있다는 것입니다.SSR는 최적화 및 사용자 경험을 크게 향상시키고 애플리케이션의 인식 성능을 향상시킵니다.

vuex 설명서를 참조하십시오. vuex https://vuex.vuejs.org을 사용해야 하는 모든 이유와 시기에 대해 설명합니다.

예를 들어, 여러 구성요소는 동일한 정보를 필요로 하며, 돌연변이, 유효성 검사 등을 제어해야 합니다.

네, Vuex를 사용하지 않고 모든 작업을 수행할 수 있지만 시간이 지남에 따라 어플리케이션이 커지면 유지보수가 어려워집니다.

vuex 설명서에 따르면

문제 1: 깊이 중첩된 구성 요소에서는 통과 소품이 지루할 수 있으며 형제 구성 요소에서는 작동하지 않습니다.문제 2: 직접 부모/자녀 인스턴스 참조에 도달하거나 이벤트를 통해 여러 개의 상태 복사본을 변환 및 동기화하려는 등의 솔루션에 의존하는 경우가 많습니다.이러한 패턴은 모두 취약하기 때문에 유지보수가 불가능한 코드로 이어집니다.

그게 당신의 질문에 답하길 바랍니다.

언급URL : https://stackoverflow.com/questions/57710800/when-should-i-use-vuex