# 이동 횟수 측정

## 이동 횟수 측정

이 문서에서는 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vuex/move-count.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.