이동 횟수 측정
이동 횟수 측정
이 문서에서는 Vue Router의 Global beforeEach guard를 사용하여 페이지 이동 횟수를 측정하여 Vuex에 저장하는 내용에 대해서 살펴본다.
beforeEachVuex state
다음과 같이 Vuex state에 이동 횟수를 저장할 moveCount
변수를 생성한다.
import {createStore} from "vuex";
const store = createStore({
state:{
moveCount:0,
}
});
export default store;
Vuex getters
외부에서 state의 moveCount
를 확인할 수 있도록 getters에 반환 메소드를 추가한다.
import {createStore} from "vuex";
const store = createStore({
state:{
moveCount:0,
},
getters:{
getMoveCount(state){
return state.moveCount;
},
}
});
export default store;
Vuex mutations
외부에서 state의 moveCount
를 증가 처리할 수 있도록 mutations에 메소드를 추가한다.
import {createStore} from "vuex";
const store = createStore({
state:{
moveCount:0,
},
getters:{
getMoveCount(state){
return state.moveCount;
},
},
mutations:{
plusMoveCount(state){
state.moveCount ++;
},
}
});
export default store;
Vue router guard 설정
Vue router의 Global beforeEach guard를 설정하여 vuex의 plusMoveCount()를 실행하도록 구성한다.
import store from "@/store";
router.beforeEach(()=>{
store.commit("plusMoveCount");
return true;
});
전체 코드
화면 출력
App.vue
에 다음 코드를 추가한다.
<h3>이동 횟수 : {{$store.getters.getMoveCount}}</h3>
전체 코드
결과 확인

Last updated