Vuex 의 이해 state 의 용법 인 스 턴 스

1.state 란 무엇 인가?
전편글 에 따 르 면Vuex창 고 를 제공 하 는 것 이 고 창고 안에 많은 대상 이 놓 여 있다.그 중에서state는 바로 데이터 소스 저장 지 로 일반Vue대상 안의data(뒤에 말 한actions과mutations에 대응 하 는methods이다.
응답 서 저장:state에 저 장 된 데 이 터 는 응답 식 입 니 다.Vue구성 요소 가store에서 데 이 터 를 읽 습 니 다.store의 데이터 가 바 뀌 면 이 데이터 에 의존 하 는 구성 요소 도 업 데 이 트 됩 니 다.(여기'상태'='데이터'),즉 데이터 와 보 기 는 동기 화 된 것 입 니 다.
2.국부 상태
가 져 오기:Vue구성 요소 에서 데 이 터 를 가 져 옵 니 다.가장 직접적인 것 은 계산 속성 에서 가 져 올 수 있 습 니 다.
구성 요 소 는 여전히 부분 상 태 를 저장 할 수 있 습 니 다.Vuex의Store창 고 는 우리 로 하여 금 같은 관리 데 이 터 를 더욱 편리 하 게 만 들 지만 코드 가 많 으 면 지루 해 집 니 다.일부 구성 요소 의 데 이 터 는 자신 이 엄격하게 사용 할 수 있 습 니 다.우 리 는state을 구성 요소 자체 에 두 고 부분 데이터 로 서 이 구성 요소 만 사용 할 수 있 습 니 다.다른 구성 요 소 는 사용 할 수 없습니다.
3.mapStatemapState의 역할 은 전체state 와getters 를 현재 구성 요소 의computed 계산 속성 에 투사 하 는 것 이다.this.$store.state사용 예시

 import {mapState} from 'vuex' 
 export default {
 computer :
 mapState({
  count: state => state.count,
  'count' //    this.count   store.state.count
 })
}

소스 코드 봐.

export function mapState (states) {
  const res = {}  //      
  normalizeMap(states).forEach(({ key, val }) => {
  // normalizeMap（）     states  
     res[key] = function mappedState () {
      return typeof val === 'function'
      //   val     
      ? val.call(this, this.$store.state, this.$store.getters)
      //  val   ， store state getters    ，     mapped State    
      : this.$store.state[val]}})
    return res //         
  }
//      
 function normalizeMap (map) {
    return Array.isArray(map) //  state     
    ? map.map(key => ({ key, val: key }))
    //      ，  map  ，           {key,val:key}
    : Object.keys(map).map(key => ({ key, val: map[key] }))
    //       ，    ，    val  val:key
  }

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.