> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vuex/move-count.md).

# 이동 횟수 측정

## 이동 횟수 측정

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

{% content-ref url="/pages/UzZtkyQ5HFx53gixxgbn" %}
[beforeEach](/web/develop-page/js/vuejs/vue-cli-3/vue-router-4/guard/beforeeach.md)
{% endcontent-ref %}

### Vuex state

다음과 같이 Vuex state에 이동 횟수를 저장할 <mark style="color:blue;">`moveCount`</mark> 변수를 생성한다.

{% code title="/src/store/index.js" %}

```javascript
import {createStore} from "vuex";

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

export default store;
```

{% endcode %}

### Vuex getters

외부에서 state의 <mark style="color:blue;">`moveCount`</mark>를 확인할 수 있도록 getters에 반환 메소드를 추가한다.

{% code title="/src/store/index.js" %}

```javascript
import {createStore} from "vuex";

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

export default store;
```

{% endcode %}

### Vuex mutations

외부에서 state의 <mark style="color:blue;">`moveCount`</mark>를 증가 처리할 수 있도록 mutations에 메소드를 추가한다.

{% code title="/src/store/index.js" %}

```javascript
import {createStore} from "vuex";

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

export default store;
```

{% endcode %}

### Vue router guard 설정

Vue router의 Global beforeEach guard를 설정하여 vuex의 plusMoveCount()를 실행하도록 구성한다.

{% hint style="info" %}
./router/index.js에서 vuex를 사용하려면 import를 수행해야 한다.
{% endhint %}

{% code title="/src/router/index.js" %}

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

{% endcode %}

#### 전체 코드

<details>

<summary>/src/router/index.js</summary>

```javascript
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;
```

</details>

### 화면 출력

<mark style="color:blue;">`App.vue`</mark>에 다음 코드를 추가한다.

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

#### 전체 코드

<details>

<summary>/src/App.vue</summary>

```markup
<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>

```

</details>

### 결과 확인

<div align="left"><img src="/files/SnnPQjaXVur6bow6osdV" alt=""></div>