vue 구성 요소 화 개발-vuex 상태 관리 라 이브 러 리

Vuex 는 Vue.js 응용 프로그램 을 위 한 상태 관리 모델 입 니 다.이 는 중앙 식 저장 관리 에 응 용 된 모든 구성 요소 의 상 태 를 사용 하고 해당 하 는 규칙 으로 상 태 를 예측 가능 한 방식 으로 변화 시 킵 니 다.Vuex 도 Vue 의 공식 디 버 깅 도구 devtools extension 에 통합 되 어 0 설정 의 time-travel 디 버 깅,상태 스냅 샷 가 져 오기 내 보 내기 등 고급 디 버 깅 기능 을 제공 합 니 다.
이상 은 vuex 의 공식 문서 가 vuex 에 대한 소개 이 고 공식 문 서 는 vuex 의 용법 에 대해 상세 하 게 설명 했다.여기 서 vuex 의 각 용법 을 자세히 설명 하지 않 겠 습 니 다.이 블 로 그 를 쓰 는 목적 은 일부 학생 들 이 vuex 를 더욱 빨리 이해 하고 시작 하도록 돕 는 것 입 니 다.
vuex 를 왜 써 요?
현재 이 블 로 그 를 읽 고 있 는 친구 들 이 Vue 2.0 하위 구성 요소 간 통신,하위 구성 요소 간 의 기본 통신 방식 을 본 적 이 있 는 지 모르겠다.우리 가 통신 하 는 목적 은 흔히 구성 요소 간 에 데이터 나 구성 요소 의 상 태 를 전달 하 는 것 이다.(여기 서 데이터 와 상 태 를 상태 라 고 통칭 한다)더 나 아가 상 태 를 바 꾸 는 것 이다.그러나 우리 가 가장 기본 적 인 방식 으로 통신 을 하면 관리 해 야 할 상태 가 많아 지면 코드 가 혼 란 스 러 워 지 는 것 을 볼 수 있다.모든 상태 에 대한 관 리 는 힘 에 부친 다.특히 여러 사람 이 협력 할 때.
이때 vuex 가 나 타 났 습 니 다.그 는 우리 가 공용 상 태 를 모두 꺼 내 vuex 용기 에 넣 은 다음 에 일정한 규칙 에 따라 관리 하 는 것 을 도 왔 습 니 다.
Vuex 의 핵심
vuex 는 다음 과 같은 몇 부분 으로 구성 되 어 있 습 니 다.

state

mutations

getters

actions

modules

state 에 서 는 프로젝트 를 저장 할 때 여러 구성 요소 가 공유 되 어야 하 는 상태 입 니 다.
mutations 는 state 의 상 태 를 바 꾸 는 방법 을 저장 합 니 다.
getters 는 state 에서 상 태 를 파생 시 키 는 것 입 니 다.예 를 들 어 state 의 특정한 상 태 를 걸 러 내 고 새로운 상 태 를 가 져 오 는 것 입 니 다.
actions 는 mutation 의 강화 판 입 니 다.commt mutations 의 방법 으로 상 태 를 바 꿀 수 있 습 니 다.가장 중요 한 것 은 비동기 작업 을 할 수 있 습 니 다.
modules 는 말 그대로 이 용기 로 이런 상 태 를 담 는 것 이 혼 란 스 러 울 때 우 리 는 용 기 를 몇 조각 으로 나 누 어 상태 와 관리 규칙 을 분류 하여 담 을 수 있다.이것 은 우리 가 js 모듈 을 만 드 는 것 과 하나의 목적 으로 코드 구 조 를 더욱 명확 하 게 하 는 것 이다.
실례 를 들 어 Vuex 를 이해 하 다

//    vuex   
var vuexStore = new Vuex.Store({
 state:{
  message:'Hello World',
  bookList:[
   {
    name:'javascript    ',
    price:100,
    en:'jq'
   },
   {
    name:'angularjs    ',
    price:80,
    en:'aq'
   },
   {
    name:'HTTP    ',
    price:50,
    en:'hq'
   }
  ]
 },
 mutations:{
  //  
  showMessage:function(state,data){
   state.message = 'Store mutations changed this words。'+data;
  }
  addBook:function(state,data){
   state.bookList.push(data)
  }
 },
 getters:{
  filterPrice:function(state){
   var narr = [];
   for(var i = 0;i<state.bookList.length;i++){
    state.bookList[i].price<85 ? narr.push(state.bookList[i]) : null;
   }
   return narr;
  }
 },
 actions:{
  //    
  addBook:function(context){
   setTimeout(function(){
    context.commit('addBook',{name:'HTML5    ',price:75});
   },2000);
  }
 },
 modules:{
  a:storeA,b:storeB
 }
});

// vue   
var vm = new Vue({
　　el:'app',
　　store:VuexStore,
　　methods:{
  showMessage:function(){
　　　　　　this.$store.commit('showMessage','    ')
　　　　},
  filterList:function(){
   return this.store.getters.filterPrice();
  },
  addBooks:function(){
　　　　　　this.$store.dispatch('addBook')
　　　　},
　　}
});

[state]vuex 핵심 개념 은 다섯 가지 가 있 습 니 다.우리 가 모든 상 태 를 각 구성 요소 에서 추출 하여 state 에 넣 었 을 때:message 와 bookList;
[mutations]어느 구성 요소 에서 state 의 message 데 이 터 를 바 꿔 야 합 니 다.우 리 는 commit 방법 을 호출 하여 mutations 에 대응 하 는 이벤트 에 제출 해 야 합 니 다.commt('show Message')는 mutations 에서 showMessage 방법 을 호출 합 니 다.호출 방법 은 위의 코드 중 57 줄 과 같은 방식 입 니 다.
[getters]어느 시간,어떤 구성 요 소 는 bookList 의 가격 이 85 이하 인 모든 데 이 터 를 얻 을 필요 가 있 습 니 다.vuex 에 서 는 getters 를 통 해 얻 을 수 있 습 니 다.사용 방법 은 위의 코드 중 60 줄 과 같 습 니 다.
[actions]이것 은 mutations 의 강화 부분 입 니 다.다만 이 안의 함 수 는 비동기 로 조작 할 수 있 습 니 다.예 를 들 어 네트워크 요청 등 입 니 다.이 방법 은 상 태 를 바 꾸 려 면 commt()함 수 를 통 해 mutations 에 제출 하 는 것 이 좋 습 니 다.공식 적 으로 는 그렇게 말 했다.인 스 턴 스 에서 호출 은 보통 dispatch(funName)를 통 해 호출 됩 니 다.예 를 들 어 인 스 턴 스:66 줄 코드
[moduls]modules 는 여러 개의 상태 관리 라 이브 러 리 입 니 다.한 대상 에 놓 습 니 다.예 를 들 어 우 리 는 두 개의 상태 라 이브 러 리 가 있 습 니 다.storeA,storeB.우 리 는 modules 에서 위의 코드 에서 50 줄 의 쓰기 와 같다.
 값 을 추출 할 때 인 스 턴 스 에서 직접 호출 합 니 다:this.$store.state.a 는 store A 라 는 store 의 상 태 를 되 돌려 줍 니 다.
여기 서 주의해 야 할 점 이 있 습 니 다.모든 하위 모듈 의 getters 대상 에 있 는 방법 은$store 에 합 쳐 집 니 다.하위 모듈 에 이름 을 바 꾸 는 방법 이 있 으 면 오류 가 발생 할 수 있 습 니 다.
그러나 모든 하위 모듈 에서 actions 와 mutations 의 방법 은 합 쳐 지지 않 고 이름 을 바 꾸 는 것 도 틀 리 지 않 습 니 다.그러나 dispatch 나 commt 가 같은 이름 의 사건 을 수행 할 때 각 하위 모듈 의 사건 을 순서대로 수행 합 니 다.
따라서 서로 다른 하위 모듈 의 actions 와 mutations 에 중복 되 는 함수 이름 을 쓰 지 마 십시오.
Vuex 사용 하기
다음은 Vuex 를 어떻게 도입 하여 우리 의 관리 상 태 를 협조 하 는 지 알려 드 리 겠 습 니 다.
우선 Vuex.js 를 도입 해 야 합 니 다.
그리고 vuex 인 스 턴 스 를 새로 만 듭 니 다.

 var store = new VuexStore({
 state:{
  } ,
  mountations:{
  },  
 })

store 를 만 든 후 이 store 를 vue 의 인 스 턴 스 와 구성 요소 에 주입 해 야 합 니 다.

 var vm = new Vue({
 el:'#app',
 store:store 
 })

그리고 우 리 는 위 에서 소개 한 방법 처럼 사용 할 수 있다.
마지막 으로 한 마디 더 하 겠 습 니 다.공식 적 으로 제안 한 디 렉 터 리 구 조 는 mutations,actions,getters 등 일련의 디 렉 터 리 로 나 뉘 어 여러 사람 이 개발 하고 유지 할 수 있 도록 합 니 다.
vue 는 여기 서 이미 많은 연 구 를 했다.백 리 를 가 는 사람 은 반 90 리 이 므 로 더 깊이 연구 해 야 한다.개인 적 으로 vue 2.0 에 대한 총 결 demo 가 gitHub 에 업로드 되 었 습 니 다.주소:https://github.com/HUA1/vue2-summary.git
본 고 는 여기 서 끝 냅 니 다.관련 된 vue 버 전 은 2.0.x 입 니 다.vuex 버 전 은 2.2.1 입 니 다.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.