소개

vuex는 state management library용 vue으로 vueJs 애플리케이션 내에서 데이터를 공유하고 배포하는 것이 덜 번거롭습니다.

전제 조건

Vue의 기본 지식이 필요합니다.

다음은 무엇

vuex 가 없으면 props 를 사용하여 구성 요소 간에 데이터를 간단히 배포할 수 있지만 응용 프로그램이 커지면 데이터 관리가 상당히 어려울 수 있습니다.

이 문제를 해결하기 위해 vuex를 사용합니다. 여기에 중앙 저장소가 있고 해당 저장소에서 구성 요소가 상태에 직접 액세스할 수 있습니다.

일반적인store 폴더는 다음과 같습니다.

  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

  export const= new 
  Vuex.Store({
   state:{
   },
   getters:{
   },
   mutations:{
   },
   actions:{
   }
})

Store: 이것은 우리 애플리케이션의 상태를 유지하며 다음을 사용하여 액세스할 수 있습니다.

this.$store

State : 애플리케이션에서 공유할 데이터입니다. 그래서 대신 소품을 통해 전달합니다. 우리는 단순히 그것을 우리 가게에 가지고 있고 우리의 구성 요소가 그것들에 직접 접근하도록 할 수 있습니다.

Getters: , 우리는 getters를 store에 대한 계산된 속성으로 생각하고 여기에는 단순히 store getter를 구성 요소 계산된 속성으로 가져오는 mapGetters Helper 도우미가 있습니다.

돌연변이: 상태는 돌연변이를 커밋하여 vuex 저장소에서만 변경할 수 있습니다. 돌연변이는 직접 호출할 수 없습니다. 그렇게 하려면 store.commit 를 사용해야 합니다. 구성 요소 메서드에서 돌연변이를 커밋하는 대신 단순히 돌연변이에 대한 작업을 전달합니다.

Actions : Action은 contex.comit를 사용하여 변형을 커밋하고 store.dispatch를 사용하여 작업을 전달합니다. mapAction 도우미도 있습니다.

vuex의 기본 개념을 이해하면 코드를 효과적으로 구조화하고 유지하는 데 도움이 됩니다.

자세한 내용은 check out the vuex documentation to read more on the core and advance concepts of vuex

원본 기사는 내blog에 게시되었습니다.