Vuex 의 이해 state 의 용법 인 스 턴 스
전편글 에 따 르 면
Vuex창 고 를 제공 하 는 것 이 고 창고 안에 많은 대상 이 놓 여 있다.그 중에서state는 바로 데이터 소스 저장 지 로 일반Vue대상 안의data(뒤에 말 한actions과mutations에 대응 하 는methods이다.응답 서 저장:
state에 저 장 된 데 이 터 는 응답 식 입 니 다.Vue구성 요소 가store에서 데 이 터 를 읽 습 니 다.store의 데이터 가 바 뀌 면 이 데이터 에 의존 하 는 구성 요소 도 업 데 이 트 됩 니 다.(여기'상태'='데이터'),즉 데이터 와 보 기 는 동기 화 된 것 입 니 다.2.국부 상태
가 져 오기:
Vue구성 요소 에서 데 이 터 를 가 져 옵 니 다.가장 직접적인 것 은 계산 속성 에서 가 져 올 수 있 습 니 다.구성 요 소 는 여전히 부분 상 태 를 저장 할 수 있 습 니 다.
Vuex의Store창 고 는 우리 로 하여 금 같은 관리 데 이 터 를 더욱 편리 하 게 만 들 지만 코드 가 많 으 면 지루 해 집 니 다.일부 구성 요소 의 데 이 터 는 자신 이 엄격하게 사용 할 수 있 습 니 다.우 리 는state을 구성 요소 자체 에 두 고 부분 데이터 로 서 이 구성 요소 만 사용 할 수 있 습 니 다.다른 구성 요 소 는 사용 할 수 없습니다.3.mapState
mapState의 역할 은 전체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
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vuex의 템플릿 리터럴 유형TypeScript 4.1은 템플릿 리터럴 유형을 도입했습니다. 언뜻 보기에는 별로 흥미롭게 들리지 않습니다. 다른 유형을 기반으로 하는 리터럴 유형의 조합을 만들 수 있습니다. 그러나이 기능이 매우 유용한 경우가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
