집 > 기사 > 웹 프론트엔드 > vuex의 store 사용 소개(예제 포함)

vuex의 store 사용 소개(예제 포함)

不言원래의: 2018-08-23 16:56:174333검색

이 글은 vuex의 스토어 사용 방법을 소개합니다(예시 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 상태 관리(vuex) 소개
vuex는 vue.js 애플리케이션을 위해 특별히 개발된 상태 관리 모델입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다. Vuex는 또한 제로 구성 시간 이동 디버깅, 상태 스냅샷 가져오기 및 내보내기 등과 같은 고급 디버깅 기능을 제공하는 Vue의 공식 디버깅 도구 devtools 확장을 통합합니다.

2. 상태 관리 코어
상태 관리에는 상태, 게터, 돌연변이, 액션 및 모듈이라는 5개의 코어가 있습니다. 각각 간단히 소개하겠습니다:
1. State는 단일 상태 트리입니다. State에서는 관리해야 할 배열, 객체, 문자열 등을 정의해야 합니다. 여기에 정의한 경우에만 정의한 객체의 상태를 vue에서 얻을 수 있습니다. js 구성 요소입니다.
2.게터
Getter는 vue.js의 계산된 속성과 다소 유사합니다. 저장소의 상태에서 일부 상태를 파생해야 하는 경우 Getter를 사용해야 합니다. Getter는 상태를 첫 번째 매개변수로 받고 getter의 반환 값은 이를 기반으로 합니다. 캐시되어 getter의 종속성 값(파생되어야 하는 상태의 값)이 변경될 때만 다시 계산됩니다.
3. 돌연변이
스토어에서 상태를 변경하는 유일한 방법은 이벤트와 매우 유사한 변형을 제출하는 것입니다. 각 변이에는 문자열 형식의 이벤트 유형과 콜백 함수가 있습니다. 상태 값을 변경해야 하는 경우 콜백 함수에서 변경해야 합니다. 이 콜백 함수를 실행하려면 해당 호출 메서드인 store.commit를 실행해야 합니다.
4. 액션
작업은 변형을 제출할 수 있고, store.commit은 작업에서 실행될 수 있으며, 작업 중인 비동기 작업이 있을 수 있습니다. 페이지에서 이 작업을 사용하려면 store.dispatch
5, 모듈
을 실행해야 합니다. 모듈은 실제로 상태가 매우 복잡하고 비대한 경우에만 문제를 해결합니다. 모듈은 저장소를 모듈로 나눌 수 있으며 각 모듈에는 자체 상태, 돌연변이, 동작 및 게터가 있습니다.

3. 예시

1. 먼저 store.js를 만들고 vuex

import Vue from &#39;vue&#39;import Vuex from &#39;vuex&#39;Vue.use(Vuex)const state = {   
userInfo: {}
}const mutations = {
    updateUserInfo(state, infos) {
        state.userInfo= infos
    }
}
export default new Vuex.Store({
    state,
    mutations
})

를 소개하면 이렇게 간단한 store.js가 완성됩니다.

이 확립된 상태 관리를 인터페이스에서 어떻게 사용합니까?

1. 데이터 설정(업데이트)

首先在script下引入store.js
<script>
import store from &#39;store.js的路径&#39;import { 
mapMutations 
} 
from &#39;vuex&#39;methods:{
    ...mapMutations([        
    &#39;updateUserInfo&#39;
    ])
}
</script>

데이터를 업데이트해야 하는 곳에서 데이터를 업데이트합니다

this.updateUserInfo(data)

2. 데이터 가져오기

<script>
import store from &#39;store.js的路径&#39;import { 
mapState 
} 
from &#39;vuex&#39;computed: {
   ...mapState({
        userInfo: &#39;userInfo&#39;
   })
},
created() {
    console.log(this.userInfo)
}
</script>

Get 필요한 곳에 데이터가 생성됨 || 메소드

참고: 동일한 페이지에서 데이터를 설정하고 가져올 수도 있습니다

import { mapMutations, mapState } from &#39;vuex&#39;

vuex의 store 사용 소개(예제 포함)

관련 기사