Vuex 상태 기기 의 빠 른 이해 와 인 스 턴 스 응용
1.구성 요소 간 에 데 이 터 를 공유 하 는 방식:
보통 다음 과 같은 몇 가지 방식 이 있다.
4.567917.공식 적 인 말 에 따 르 면 Vuex 는 Vue.js 응용 프로그램 을 위 한 상태 관리 모델 이다.이 는 중앙 식 저장 관리 에 응 용 된 모든 구성 요소 의 상 태 를 사용 하고 해당 하 는 규칙 으로 상 태 를 예측 가능 한 방식 으로 변화 시 킵 니 다.Vuex 도 Vue 의 공식 디 버 깅 도구 devtools extension(opens new window)에 통합 되 어 0 설정 의 time-travel 디 버 깅,상태 스냅 샷 가 져 오기 내 보 내기 등 고급 디 버 깅 기능 을 제공 합 니 다
4.567917.vuex 에서 공 유 된 데 이 터 를 집중 적 으로 관리 하여 개발 과 후기 유지 하기 쉽다4.567917.구성 요소 간 의 데이터 공 유 를 효율적으로 실현 하고 개발 효율 을 높 일 수 있다4.567917.vuex 에 저 장 된 데 이 터 는 모두 응답 식 으로 데이터 와 페이지 의 동기 화 를 실시 간 으로 유지 할 수 있 습 니 다4.567917.비 부자 구성 요소 의 메시지 전달 을 해결 했다(데 이 터 를 state 에 저장)
2.기본 사용:
1.의존 패키지 설치:
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
//state
state: {
count: 0
}
})
new Vue({
el: '#app',
store
})
3.프로젝트 생 성:
다음은 vue 프로젝트 프로 세 스 를 만 들 기 위해 다음 사례 가 있 습 니 다.
(1)cmd 창 을 열 고 vue ui 를 입력 하여 vue 의 시각 화 패 널 을 엽 니 다.
(2)새 항목 경로 선택:
(3)이름:
(4)수 동 으로 설정 을 선택 하고 vue 2 버 전 을 사용 합 니 다.
(5)생 성:
(6)다음 단계:
(7)생 성 에 성공 하여 해당 디 렉 터 리 에서 vscode 를 열 고 프로 그래 밍 을 시작 합 니 다.
(8)실행 항목:
4.전 제 를 설명 한다.
전제(주의):
『8195』는 카운터 의 작은 사례 를 쓰 고 사례 에서 개념 을 결합 하면 vuex 를 더욱 빨리 시작 할 수 있 습 니 다.그래서 다음 핵심 개념 중의 코드 부분 은 이 작은 사례 를 바탕 으로 보 여 주 는 것 이다.목표:두 개의 하위 구성 요 소 를 작성 합 니 다.하나의 공공 count 값 이 있 습 니 다.부모 구성 요소 중 하 나 는 클릭 후 count 값 을 1 로 줄 이 고 한 구성 요 소 는 클릭 후 count 값 을 1 로 증가 합 니 다.
부모 구성 요소 App.vue 초기 코드:
<template>
<div id="app">
<my-add></my-add>
<p>--------------------</p>
<my-reduce></my-reduce>
</div>
</template>
<script>
//
import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
export default {
name: 'App',
data() {
return {
}
},
components: {
'my-add': Add,
'my-reduce': Reduce
}
}
</script>
<template>
<div>
<p>count ：</p>
<button>+1</button>
</div>
</template>
<script>
export default{
data() {
return {
}
},
}
</script>
<template>
<div>
<p>count ：</p>
<button>-1</button>
</div>
</template>
<script>
export default{
data() {
return {
}
},
}
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
}
})
5.핵심 개념:
1.state：
공식 적 인 말 에 따 르 면 다음 과 같다.Vuex 는 단일 상태 트 리 를 사용 합 니 다.네,한 대상 으로 모든 응용 등급 상 태 를 포함 합 니 다.이로써'유일한 데이터 원본(SSOT)'으로 존재 한다.이것 은 모든 응용 프로그램 이 하나의 store 인 스 턴 스 만 포함 한 다 는 것 을 의미한다.
쉽게 말 하면 State 가 유일한 공공 데이터 소스 를 제공 하고 모든 공 유 된 데 이 터 는 Store 의 State 에 통일 적 으로 저장 해 야 합 니 다.
1.1 구성 요소 에서 state 에 접근 하 는 첫 번 째 방법:
구성 요소 에 다음 명령 을 직접 입력 하 십시오:
this.$store.state.인 용 된 데이터 이름
add.vue 하위 구성 요소 에서 참조:
<template>
<div>
<p>count ：{{this.$store.state.count}}</p>
<button>+1</button>
</div>
</template>
// ，
1.2 구성 요소 에서 state 에 접근 하 는 두 번 째 방식:
(1)vuex 에서 필요 에 따라 mapState 함 수 를 가 져 옵 니 다.
import { mapState } from 'vuex'
computed: {
...mapState([count])
}
Reduce.vue 하위 구성 요소 에서 참조:
<template>
<div>
<p>count ：{{count}}</p>
<button>-1</button>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default{
data() {
return {
}
},
computed: {
...mapState(['count'])
}
}
</script>
2. mutation：
공식 적 으로 Vuex 의 store 상 태 를 변경 하 는 유일한 방법 은 mutation 을 제출 하 는 것 입 니 다.Vuex 의 mutation 은 이벤트 와 매우 유사 합 니 다.모든 mutation 에는 문자열 의 이벤트 형식(type)과 반전 함수(handler)가 있 습 니 다.이 반전 함 수 는 우리 가 실제 상태 변경 을 하 는 곳 이 며,state 를 첫 번 째 매개 변수 로 받 아들 일 것 입 니 다.
쉽게 말 하면 Mutation 이 Store 의 데 이 터 를 변경 하 는 데 사용 하 는 것 입 니 다.
① mutation 을 통 해서 만 Store 데 이 터 를 변경 할 수 있 으 며 Store 의 데 이 터 를 직접 조작 할 수 없습니다.
② 이러한 방식 을 통 해 조작 이 다소 번 거 롭 지만 모든 데이터 의 변 화 를 집중 적 으로 모니터링 할 수 있다.
예 를 들 어 count 값 이 1 을 추가 하 는 작업 을 실현 하려 면 먼저 motations 에서 1 을 추가 하 는 함 수 를 정의 합 니 다.그리고 하위 구성 요 소 를 사용 하려 면 이 구성 요 소 는 mutation 을 직접 도입 하고 해당 하 는 함 수 를 호출 하면 됩 니 다.
다음 과 같이 add.vue 서브 구성 요 소 는 1 기능 을 추가 합 니 다.
먼저 상태 기 에 있 는 mutations 에서 자체 증 가 를 실현 할 수 있 는 함수 add 를 정의 합 니 다.
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// 1
add(state){
state.count++
}
}
})
add.vue 하위 구성 요소 에서 단추 바 인 딩 클릭 이벤트 와 mutation 을 실행 합 니 다.
<template>
<div>
<p>count ：{{this.$store.state.count}}</p>
<button @click="btnAdd">+1</button>
</div>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
btnAdd() {
// mutation ， add
this.$store.commit('add')
}
}
}
</script>
2.2 mutation 을 촉발 하고 매개 변 수 를 전달 합 니 다:
물론 구성 요소 에서 mutation 의 함 수 를 호출 할 때 도 인 자 를 전달 할 수 있 습 니 다.
예 를 들 어 자체 증가 함수 가 있 지만 호출 할 때 들 어 오 는 매개 변 수 를 얼마나 늘 리 는 지 볼 수 있 습 니 다.
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// ， state，
// n
addN(state,n){
state.count+= n
}
}
})
methods: {
btnAdd2() {
// mutation ， addN
// ， 6
this.$store.commit('addN',6)
}
}
(1)vuex 에서 필요 에 따라 mapMutations 함 수 를 가 져 옵 니 다.
import { mapMutations } from 'vuex'
methods: {
...mapMutations(['add','addN'])
}
상태 기 자동 감소 함수 추가:
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// 1
add(state){
state.count++
},
// 1
sub(state){
state.count--
}
}
})
<template>
<div>
<p>count ：{{count}}</p>
<button @click="btnSub">-1</button>
</div>
</template>
<script>
//
import {mapState,mapMutations} from 'vuex'
export default{
data() {
return {
}
},
computed: {
...mapState(['count'])
},
methods: {
// mutation sub
...mapMutations(['sub']),
// ， sub
btnSub(){
this.sub()
}
}
}
</script>
3.Action：
이로써 네 번 째 큰 점 에서 의 사례 는 이미 완성 되 었 고 자체 증가 와 자체 감 소 를 실현 했다.지금 은 사례 를 개선 하고 자 한다.버튼 을 클릭 한 지 1 초 후에 증가 와 자체 감 소 를 해 야 한다.어떻게 실현 해 야 합 니까?상태 기 에 있 는 mutation 의 함 수 는 1 초 타 이 머 를 추가 하 는 것 입 니까?이것 은 분명 안 됩 니 다.mutation 에 서 는 비동기 작업 을 지원 하지 않 기 때문에 어떻게 합 니까?당당,Action 이 반 짝 이 며 등장 합 니 다.
Action 은 임의의 비동기 작업 을 포함 할 수 있 기 때문에 비동기 작업 을 처리 하 는 데 사 용 됩 니 다.
Action 은 상 태 를 직접 변경 하 는 것 이 아니 라 mutation 을 제출 합 니 다.state 의 데 이 터 를 직접 수정 할 수 없고 mutation 만 수정 할 수 있다 는 것 을 기억 하 세 요.비동기 조작 을 통 해 데 이 터 를 변경 할 경우 뮤 테 이 션 대신 액 션 을 통 해 야 하지만 액 션 에 서 는 뮤 테 이 션 을 촉발 하 는 방식 으로 간접 적 으로 데 이 터 를 변경 해 야 한 다 는 것 이다.
먼저 상태 기 에서 Action 을 정의 합 니 다:
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// 1
add(state){
state.count++
},
// 1
sub(state){
state.count--
}
},
// action， addAsync 1 mutation add
actions: {
addAsync(context) {
setTimeout(()=>{
// context.commit（） mutation
context.commit('add')
},1000)
}
}
})
3.1 Action 을 실행 하 는 첫 번 째 방법:
구성 요소 add.vue 코드 를 변경 하고 Action 을 도입 하여 비동기 자동 증가 작업 을 실현 합 니 다.
<template>
<div>
<p>count ：{{this.$store.state.count}}</p>
<button @click="btnAdd">+1</button>
</div>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
btnAdd() {
// Action ， addAsync
// dispatch action
this.$store.dispatch('addAsync')
}
}
}
</script>
3.2 Action 비동기 작업 을 촉발 하고 매개 변 수 를 전달 합 니 다:
물론 구성 요소 에서 action 의 함 수 를 호출 할 때 도 인 자 를 전달 할 수 있 습 니 다.
예 를 들 어 1 초 를 클릭 한 후에 실 행 된 자체 증가 함수 가 있 지만 호출 할 때 들 어 오 는 매개 변 수 를 얼마나 늘 리 는 지 볼 수 있 습 니 다.
정의:
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// ， state，
// n
addN(state,n){
state.count+= n
}
},
actions: {
// n， n mutation addN
addNAsync(context,n) {
setTimeout(()=>{
context.commit('addN',n)
},1000)
}
}
})
methods: {
btnAdd2() {
// dispatch
// action ， 6 ， 6
this.$store.dispatch('addNAsync',6)
}
}
(1)vuex 에서 필요 에 따라 mapActions 함 수 를 가 져 옵 니 다.
import { mapActions } from 'vuex'
methods: {
...mapActions(['add','addN'])
}
actions 의 subAsync 를 1 초 후 자감 함수 로 정의 합 니 다:
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// 1
add(state){
state.count++
},
// 1
sub(state){
state.count--
}
},
actions: {
addAsync(context) {
setTimeout(()=>{
context.commit('add')
},1000)
},
subAsync(context) {
setTimeout(()=>{
context.commit('sub')
},1000)
}
}
})
<template>
<div>
<p>count ：{{count}}</p>
<button @click="btnSub">-1</button>
</div>
</template>
<script>
//
import {mapState,mapActions} from 'vuex'
export default{
data() {
return {
}
},
computed: {
...mapState(['count'])
},
methods: {
// Action
...mapActions(['subAsync']),
// ， subAsync
btnSub(){
this.subAsync()
}
}
}
</script>
4. Getter：
『8195』Getter 는 Store 의 데 이 터 를 가공 처리 하여 새로운 데 이 터 를 만 드 는 데 사 용 됩 니 다.그리고 주의해 야 할 것 은 state 의 데 이 터 를 수정 하지 않 는 다 는 것 이다.
① Getter 는 Store 에 있 는 데 이 터 를 가공 처리 한 후에 새로운 데 이 터 를 형성 할 수 있 으 며 Vue 와 같은 계산 속성 을 가진다.
② 스토어 에서 데이터 가 바 뀌 면 Getter 의 데이터 도 달라 진다.
현재 count+1 을 되 돌려 주 는 getter 함수 가 있 습 니 다:
export default new Vuex.Store({
state: {
count: 0
},
getters: {
showNum(state){
return` count 1 :${state.count+1}`
}
}
})
this.$store.getters.
<template>
<div id="app">
<my-add></my-add>
<p>--------------------</p>
<my-reduce></my-reduce>
<p>--------------------</p>
<h3>{{this.$store.getters.showNum}}</h3>
</div>
</template>
4.2 getters 를 촉발 하 는 두 번 째 방식:
(1)vuex 에서 필요 에 따라 mapGetters 함 수 를 가 져 옵 니 다.
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['showNum'])
}
<template>
<div id="app">
<my-add></my-add>
<p>--------------------</p>
<my-reduce></my-reduce>
<p>--------------------</p>
<h3>{{showNum}}</h3>
</div>
</template>
<script>
//
import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
// mapGetters
import {mapGetters} from 'vuex'
export default {
name: 'App',
data() {
return {
}
},
components: {
'my-add': Add,
'my-reduce': Reduce
},
// getter
computed: {
...mapGetters(['showNum'])
}
}
</script>
6.총화:
Vuex 상태 기 에 대한 빠 른 이해 와 인 스 턴 스 애플 리 케 이 션 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vuex 상태 기 애플 리 케 이 션 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 저 희 를 많이 사랑 해 주세요!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vuex의 템플릿 리터럴 유형TypeScript 4.1은 템플릿 리터럴 유형을 도입했습니다. 언뜻 보기에는 별로 흥미롭게 들리지 않습니다. 다른 유형을 기반으로 하는 리터럴 유형의 조합을 만들 수 있습니다. 그러나이 기능이 매우 유용한 경우가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
