이동 횟수 측정

이동 횟수 측정

이 문서에서는 Vue Router의 Global beforeEach guard를 사용하여 페이지 이동 횟수를 측정하여 Vuex에 저장하는 내용에 대해서 살펴본다.

beforeEach

Vuex state

다음과 같이 Vuex state에 이동 횟수를 저장할 moveCount 변수를 생성한다.

/src/store/index.js

import {createStore} from "vuex";

const store = createStore({
    state:{
        moveCount:0,
    }
});

export default store;

Vuex getters

외부에서 state의 moveCount를 확인할 수 있도록 getters에 반환 메소드를 추가한다.

/src/store/index.js

import {createStore} from "vuex";

const store = createStore({
    state:{
        moveCount:0,
    },
    getters:{
        getMoveCount(state){
            return state.moveCount;
        },
    }
});

export default store;

Vuex mutations

외부에서 state의 moveCount를 증가 처리할 수 있도록 mutations에 메소드를 추가한다.

/src/store/index.js

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()를 실행하도록 구성한다.

./router/index.js에서 vuex를 사용하려면 import를 수행해야 한다.

/src/router/index.js

import store from "@/store";
router.beforeEach(()=>{
    store.commit("plusMoveCount");
    return true;
});

전체 코드

/src/router/index.js

import {createWebHashHistory, createRouter} from 'vue-router';

//주소와 연결할 컴포넌트를 불러온다
import FirstScreenVue from "@/components/FirstScreen.vue";
import SecondScreenVue from "@/components/SecondScreen.vue";

//404 NotFound 처리를 위한 컴포넌트를 불러온다
import NotFoundVue from "@/components/error/NotFound.vue";

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        //기본 주소(/) 요청이 올 경우 FirstScreenVue로 연결한다
        {path:"/", component:FirstScreenVue},
        //second 주소 요청이 올 경우 SecondScreenVue로 연결한다
        {path:"/second", component:SecondScreenVue},
        //매핑 가능한 화면이 없을 경우 NotFoundVue로 연결한다
        {path: '/:pathMatch(.*)', component:NotFoundVue},
    ]
});

import store from "@/store";
router.beforeEach(()=>{
    store.commit("plusMoveCount");
    return true;
});

export default router;

화면 출력

App.vue에 다음 코드를 추가한다.

<h3>이동 횟수 : {{$store.getters.getMoveCount}}</h3>

전체 코드

/src/App.vue

<template>
  <img alt="Vue logo" src="@/assets/logo.png">

  <hr>
    <h3>이동 횟수 : {{$store.getters.getMoveCount}}</h3>
  <hr>
  
  <router-link to="/">first screen</router-link>
  &nbsp;&nbsp;&nbsp;
  <router-link to="/second">second screen</router-link>

  <hr>

  <router-view></router-view>
</template>

<script>
export default {
  name: 'App',
  components: {
    
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

결과 확인