Vue 의 Flux 프레임 워 크 Vuex 상태 관리자
Vuex 가 뭐 예요?
Vuex 는 React 에 있 는 Redux 와 유사 한 상태 관리자 로 Vue 의 모든 구성 요소 상 태 를 관리 합 니 다.
왜 Vuex 를 사용 합 니까?
대형 단일 페이지 애플 리 케 이 션(SPA)을 개발 하려 면 여러 개의 보기 구성 요소 가 같은 상태 에 의존 하고 서로 다른 보기 에서 온 행동 은 같은 상 태 를 변경 해 야 합 니 다.
상기 상황 이 발생 했 을 때,당신 은 Vuex 를 사용 하 는 것 을 고려 해 야 합 니 다.이것 은 구성 요소 의 공유 상 태 를 추출 하여 전역 단일 모드 로 관리 할 수 있 습 니 다.이렇게 하면 당신 이 어디에서 상 태 를 바 꾸 든 지 간 에 이 상태의 구성 요 소 를 사용 하여 상응하는 수정 을 하 라 고 통지 할 것 이다.
Vuex 를 어떻게 사용 하 는 지 설명 하 겠 습 니 다.
간단 한 Vuex 예제
본 고 는 Vuex 설치 에 대해 설명 하고 코드 를 통 해 Vuex 사용 을 설명 한다.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
주의해 야 할 것 은 mutations 를 통 해 store 의 state 상 태 를 바 꿀 수 있 을 뿐 store.state.count=5 를 통과 할 수 없습니다.직접 변경(사실 변경 할 수 있 습 니 다.이렇게 하 는 것 을 권장 하지 않 습 니 다.mutations 를 통 해 state 를 바 꾸 지 않 으 면 상태 가 동기 화 되 지 않 습 니 다)
store.commt 방법 을 사용 하여 mutations 를 실행 하여 state 를 변경 합 니 다.
store.commit('increment');
console.log(store.state.count) // 1
Vue 구성 요소 에서 Vuex 사용 하기
Vuex 상태 가 업데이트 되 기 를 원 할 때 구성 요소 데이터 가 업 데 이 트 됩 니 다.속성 computed 를 계산 하여 state 의 업데이트 상 태 를 가 져 올 수 있 습 니 다.
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count;
}
}
}
//
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const app = new Vue({
el: '#app',
store,
components: {
Counter
},
template: `
<div class="app">
<counter></counter>
</div>
`
})
// Counter
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
computed: {
count () {
return this.$store.state.count
}
}
import { mapState } from 'vuex';
export default {
computed: mapState ({
count: state => state.count,
countAlias: 'count', // `count` state => state.count
})
}
computed: mapState([
'count'
// this.count store.state.count
])만약 우리 가 state 대상 에 대해 처리 계산 을 해 야 한다 면 다음 과 같다.
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
Vuex 에서 getters 대상 은 우리 가 store 에서 집중 적 으로 처리 하 는 데 편리 합 니 다.Getters 는 state 를 첫 번 째 인자 로 받 아들 입 니 다:
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
computed: {
doneTodos () {
return this.$store.getters.doneTodos
}
}
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}mapState 와 유사 하여 코드 를 간소화 하 는 효 과 를 얻 을 수 있 습 니 다.mapGetters 보조 함 수 는 store 의 getters 를 부분 계산 속성 에 만 표시 합 니 다:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// getters computed
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
computed: mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
import { mapState, mapGetters } from 'vuex';
export default {
// ...
computed: {
...mapGetters([ ... ]),
...mapState([ ... ])
}
}
전에 도 말 했 듯 이 Vuex 의 store 의 상 태 를 바 꾸 는 유일한 방법 은 mutations 입 니 다.
모든 mutation 에는 이벤트 형식 type 과 반전 함수 handler 가 있 습 니 다.
mutation 을 호출 하려 면 store.commt 방법 으로 mutation type 을 호출 해 야 합 니 다:
store.commit('increment')store.commt 에 두 번 째 인자,즉 mutation 의 payload 를 전달 할 수 있 습 니 다.
mutaion: {
increment (state, n) {
state.count += n;
}
}
store.commit('increment', 10);
mutation: {
increment (state, payload) {
state.totalPrice += payload.price + payload.count;
}
}
store.commit({
type: 'increment',
price: 10,
count: 8
})
예외 가 아 닙 니 다.mutations 에 도 맵 함수 mapMutations 가 있 습 니 다.코드 를 간소화 하 는 데 도움 을 주 고 mapMutations 보조 함 수 를 사용 하여 구성 요소 의 methods 를 store.commt 로 호출 합 니 다.
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment' // this.increment() this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // this.add() this.$store.commit('increment')
})
}
}
주 Mutations 는 동기 함수 여야 합 니 다.
만약 에 우리 가 비동기 적 인 조작 과 여러 개의 Mutations 를 제출 해 야 한다 면 Mutations 는 우리 의 수 요 를 만족 시 킬 수 없 을 것 이다.이때 우 리 는 Actions 가 필요 하 다.
Actions
Action 은 mutation 과 유사 합 니 다.다른 것 은:
var store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: function(state) {
state.count++;
}
},
actions: {
increment: function(store) {
store.commit('increment');
}
}
});
Action 함 수 는 store 인 스 턴 스 와 같은 방법 과 속성 을 가 진 context 대상 을 받 아들 이기 때문에 context.comit 를 호출 하여 mutation 을 제출 하거나 context.state 와 context.getters 를 통 해 state 와 getters 를 가 져 올 수 있 습 니 다.
배포 액 션
action store.dispatch 방법 으로 촉발:
언뜻 보기 에는 쓸데없는 짓 을 하 는 것 같 지만,우리 가 직접 mutation 을 나 누 어 주 는 것 이 더 편리 하지 않 겠 습 니까?사실은 그렇지 않 습 니 다.mutation 은 이 제한 을 동시에 실행 해 야 한 다 는 것 을 기억 하 십 니까?액 션 은 제약 을 받 지 않 는 다!우 리 는 action 내부 에서 비동기 작업 을 수행 할 수 있 습 니 다.
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
//
store.dispatch('incrementAsync', {
amount: 10
})
//
store.dispatch({
type: 'incrementAsync',
amount: 10
})
마찬가지 로 action 에 도 대응 하 는 mapActions 보조 함수 가 있다.
mapActions
mapActions 보조 함 수 는 mapMutations 와 마찬가지 로 구성 요소 의 methods 호출 입 니 다.
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment' // this.increment() this.$store.dispatch('increment')
]),
...mapActions({
add: 'increment' // this.add() this.$store.dispatch('increment')
})
}
}
mutation-type 에 대한 설명 은 공식 문서 에 대한 설명 이 적 지만 실제 중대 프로젝트 에서==mutation-type=의 설정 은 없어 서 는 안 됩 니 다.Vuex 의 문 서 는 state,getters,mutation,actions 네 가지 핵심 개념 만 설명 하 였 습 니 다.다음은 mutation-type 의 사용 을 간단하게 보충 하 겠 습 니 다.
말 그대로==mutation-type=사실은 mutation 인 스 턴 스 의 각 방법 에 대한 설정 입 니 다.보통 mutation 방법 전에 mutation-type 을 대문자 로 설정 한 다음 에 mutation 에 도입 하여 사용 합 니 다.다음은 프로젝트 의 실제 사용 을 살 펴 보 겠 습 니 다.
프로젝트 조직 구조
mutation-type 에서 mutation 방법 구 조 를 정의 합 니 다:
//SET_SINGER,SET_SONG mutation
export const SET_SINGER = 'SET_SINGER'
export const SET_SONG = 'SET_SONG'
import * as types from ',/mutation-types.js'
const mutations = {
[types.SET_SINGER](state, singer) {
....
},
[types.SET_SONG](state, song) {
....
}
}위 에서 vuex 에 대한 설명 을 보고 입문 했다 고 믿 습 니 다.지금 은 구체 적 인 프로젝트 를 보고 깊이 이해 할 수 있 습 니 다.제 github 의 카 트 예 를 참고 할 수 있 습 니 다https://github.com/osjj/vue-shopCart
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
