[참고문서]
https://velog.io/@ymh0951/Vue%EC%97%90%EC%84%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EB%A5%BC-%ED%95%B4%EB%B3%B4%EC%9E%90-Vuex

---

1. vue 프로젝트 설치

옵션은 vuex와 scss, router를 포함해 선택한다.

store 폴더가 생김 ㅇㅅㅇ!

---

2. router

파라미터를 넘길 수 있음

<router-link :to="{name :'about', query:{num:1000}}">About</router-link>

그리고 $route.query.키로 값을 받아오기

---

3. form 실습

<form @submit.prevent="saveData">
        <input type="text" name="id" v-model="text"/>
        <button>저장</button>
</form>

...

<script>
  export default {
    data(){
      return{text:'농담곰'}
    },
    methods:{
      saveData(){
        console.log(this.text)
      }
    }
  }
</script>

간단하게 폼을 만들고 vue 문법을 적용해보자
함수 작성시 script > methods안에 작성해줘야함

v-model은 form의 input 요소나 textarea요소, select 요소에 쌍방향(two-way) 데이터 바인딩을 만들고 싶을 때, v-model 디렉티브를 사용할 수 있다.
출처: https://engineer-mole.tistory.com/333 [매일 꾸준히, 더 깊이:티스토리]

change, input 등 이벤트 발생할때 onChange value를 찾을 필요 없이 데이터 저장을 한번에 할 수 있다!

하지만 영문숫자는 괜찮은데 한글은 포커스가 없으면 안들어가는 뭐 그런일이 있다구 한당... 그래서 input에 onInput 이벤트로 이벤트 타겟 value를 저장하는걸 추가한다

<input type="text" name="id" :value="text" @input="text=$event.target.value"/>

ㅇㅅㅇb

---

4. 실습

💼 폴더 구조

views
ㄴ WriteView.vue
ㄴ ListView.vue

writeview
ㄴ 컴포넌트 => 출석체크 폼 만들기

메인(홈) 메뉴
HOME / ABOUT / TEST

---

5. 상태관리(vuex)

store

getters는 바로 실행되서 return 필요함 주의

import { createStore } from 'vuex'

export default createStore({
  state: { //state값
    data: [{ id: 0, name: '홍길동' }]
  },
  getters: { //state값 컨트롤
    limit(state) {
      return state.data.length;
    }
  },
  mutations: { //state값 수정
    saveData(state, data) {
      state.data.push(data)
    }
  },
  actions: { //mutations에 작업지시(비동기)
  },
  modules: {
  }
})

사용할때

1) mutations(set)을 불러와서 value를 저장

<input type="text" name="id" v-model="name">

...

<script>
  import {mapMutations} from 'vuex';

  export default {
    methods:{
      ...mapMutations(['saveData']),

      dataFn(){
        this.saveData({id:Date.now(), name:this.name})
        this.$router.push('list')
      },
    }
  }
  </script>

2) state 출력

<template>
    <div>
        <h1>출결 체크({{ limit }})</h1>
        
        <p v-for="(item, idx) in data"  :key="idx">
          {{ item.name }}
        </p>
    </div>
</template>
  
<script>
import { mapState, mapGetters } from 'vuex';

export default {
  computed:{
    ...mapGetters(['limit']),
    ...mapState(['data'])
  },
  updated(){
    console.log(this.data)
  }
}
</script>