제 1막

state : 말 그대로 상태를 나타냄. 

getters : 어떤 컴포넌트에서 쓸 때, 자주 사용되는 상태값에 대한 길이? 혹은 함수들을 만들어서 정의해두고 쓸 수 있다. 

장점 -> 반복을 줄이고, this.$store.state.AllUsers.length이렇게 쓸꺼를 짧게 줄여서 표현가능.

mutations는 동기 역할을 한다(state를 변화 시키는 한줄) 

actions는 비동기 역할을 한다. ( 변화시키기 위한 로직이 들어간다 ) 

( 즉, mutations와 actions는 과정과 결과처리를 분리 시켜놨다고 생각 )

( 어떤 과정이 들어오느냐 에 따라서, 여러 상태로 변화 될 수 있기 때문에 !! ) 

이게 전부다. 2가지 방법.

첫번째, 

 ...mapMutations(['addUsers'])를 등록해두고 this.addUsers(userObj)를 쓴다.

두전째, 

this.$store.commit('addUsers',userObj)만 써서 한번에 접근한다. 

그니까 mutations의 역할이 state 변화 및 관리다. 즉 효율적 관리다. 

mutations는 여러 컴포넌트에서 동작을 하는데 , 이를 비동기로 받아들이면, 같은 값에 대해서 

그 순서를 정확하게 알기 어렵다. 

즉, state를 변화 시키는 것은 mutation에 넣는다.

이를 동작시키는 biz들은 actions에 넣는다. 

mutations = commit 

actions = dispatch 

즉 , 

mutations는 동기 역할을 한다( state를 변화 시키는 한줄 ) 

actions는 비동기 역할을 한다. ( 변화시키기 위한 로직이 들어간다 ) 

store js를 어떻게 사용하는가? 

main.js에서 vue store를 임폴트 해놨다.  그렇기에 프로젝트에서 vuex가 적용되었다고 생각할 수 있다. 
https://www.youtube.com/watch?v=7i0D7OSogYc&list=PLZzSdj89sCN292abcbI3utND8pA1T1OyB&index=2

STORE.JS부분( getters 쓰는 방법  ) 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { //data 
    allUsers:[
      {userId: 'hoza123', password: '123', name: 'Hoza', address: 'Seoul', src:'https://goo.gl/oqLfJR'},
      {userId: 'max123', password: '456', name: 'Max', address: 'Berlin', src:'https://goo.gl/Ksk9B9'},
      {userId: 'lego123', password: '789', name: 'Lego', address: 'Busan', src:'https://goo.gl/x7SpCD'}
    ]
  },
  getters:{
    allUsersCount: function(state){
      return state.allUsers.length
    },
    countOfSeoul: state =>{
        let count =0 
        state.allUsers.forEach(user =>{
          if(user.address==='Seoul' || user.address==='seoul')count++
        })
        return count
    },
    percentOfSeoul: (state, getters)=>
    {
       return Math.round(getters.countOfSeoul/getters.allUsersCount *100 ) 
    }
  },
  mutations: {
 
  },
  actions: {

  }
})

// 이렇게 getters를 쓰면, vuex에 접근할 때 중복된 코드를 자꾸 쓴다. 이를 막기 위해서 getters를 쓴다. 
=> computed의 장점인 반복된 코드를 줄여준다???? 이를 그대로 가지고 있다.
=> $store.state.allUsers.length 라고 쓰던거를 줄여서 쓸 수 있다.

=> $store.getters.allUsers 이런식으로 길이를 줄여서 쓸 수 있다. 

=> 길이를 줄여줄 뿐만 아니라, 다른 원하는 함수를 만들어서 쓸 수도 있고, 중복된 코드를 줄여 

쓸 수 있는 장점이 있다. 

allUsers.vue에서 쓰는 방법

<template>
  <div>
    <h1>All Users{{count}}</h1>
      <h1>All Users{{seoul}}</h1>
      <h1>{{percent}}</h1>
    <v-list two-line>
      <v-list-tile 
        v-for="(user, index) in $store.state.allUsers"
        :key="index"
        avatar
      >
        <v-list-tile-avatar color="grey lighten-3">
          <img :src="user.src">
        </v-list-tile-avatar>

        <v-list-tile-content>
          <v-list-tile-title v-html="user.name"></v-list-tile-title>
          <v-list-tile-sub-title>id:#{{index}} / {{user.address}} 거주</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>

  </div>
</template>

<script>
import { EventBus } from '@/main.js'
import {mapState, mapGetters} from 'vuex'
  export default {
    data() {
      return {
        
      }
    },
    computed:{
      ...mapState['allUsers'],
      ...mapGetters({
        count: 'allUsersCount',
        seoul: 'countOfSeoul',
        percent: 'PercentOfSeoul'
      })
        // ...mapGetters['allUsersCount', 'countOfSeoul','PercentOfSeoul']
    },
    mounted() {
      EventBus.$on('signUp', users => {
        this.$store.state.allUsers.push(users)
      })
    }
  }
</script>

즉,

import {mapGetters} from 'vuex' 는 store에서 쓰지 않고 위와 같이 쓰는 곳에서 

정의해준다. 

getters에 있는 것들을 들고 와서 쓸 수 있도록 해준다.

 ...mapGetters({

        count: 'allUsersCount',

        seoul: 'countOfSeoul',

        percent: 'PercentOfSeoul'

      })

        // ...mapGetters['allUsersCount', 'countOfSeoul','PercentOfSeoul']

이러한 명칭을 줄여서 쓸 수도 있다는 점은 참고 !!!

이렇게 폴더를 새롭게 하나 만든다. 

https://www.youtube.com/watch?v=B98iyg_brxQ&list=PLZzSdj89sCN0sLqrTKf2m7lXe_93C19UG&index=9

ㅊ

3.x버전과 4.x 버전은 많은 차이가 있다. 

기존 store.js를 4버전에서는 store/index.js로 바꿔서 쓰고,. 

여러 변화들이 존재한다. 

VUE 개발환경 세팅 
1. vue cli : 뷰 개발환경을 빠르게 구축하도록 해주는 것. 
2. 3대와 2대의 비교,. 
3. 이 후에 설치를 받고 , vue create 프로그램명  

npm_modules ( 부품을 넣어두는 곳 ) 
package.json( 주문서 : 여기에 뭐가 필요한지 넣어두면, 모듈에서 자동으로 생성. )


assets: img 저장소.

src 안에 
App.vue 기본 파일. 
main.js : 구동 시켜주는 파일.
router.js : 라우터 조절
store.js  : 전역 상태 값을 조절. 

<<기본 배경>>
원래는 npm dev를 통해서  실행시켰다면, 
3.대 부터는 npm serve를 통해서 실행 시킨다. 

plugin (플러그인) => vuetify 기본. 
@vue/cli-plugin- 
이걸 쓰면 어떻게 바뀔까? 
부트 스트랩과 같은 역할을 하는데 , 컴포넌트 단위로 돌아간다. 
[기존 explore에서는 제공안함.]

vue-cli-plugin-vuetify // 여기를 통해서 뷰티파이 설치가능. 

npm run build 하는 이유? dist 파일 생성 -> 배포의 목적. 
div- > app
//컴포넌트 단위이기 때문에 , 객체 data:[] 형태가 아닌, 
data(){} , 함수 형태로 쓴다. 
data () {
} 

vue 

eventbus를 쓸 때, 유의 점. 

created를 통해서 이벤트의 변화를 듣는다. 

<받는 곳>
created()
{
	eventBus.$on('보낸신호의 이름', 콜백함수)
}

콜백함수는 ()=>{} 이렇게 쓴다. 

//기본 형태. 
created()
{
	eventBus.$on('받은 신호의 이름', ()=>{})
}
//인자가 있는 경우. 
created()
{
	eventBus.$on('받은 신호의 이름(abce)', (date)=>
    {
    	this.xxx = dae
    })
}


<보내는 곳_ 하나인 경우> 
eventBus.$emit("보낼신호 이름(abce)", new Date())

<중간 다리 main.js_ 하나인 경우>
export const eventBus = new Vue() //라고 써준다. 
//새로운 뷰 인스턴스를 생성해서 값을 내본다는 뜻. 



<보내는 곳.vue_ 여러 곳인 경우>
eventBus.example_function(new Date())

<main.js>
export const eventBus = new Vue({
	methods:{
    	example_function(인자) //보내는 곳의 함수이름
        {
        	this.$emit('이름' , 인자 )
        }
    }
})

https://v1.vuetifyjs.com/en/components/cards#cards

<v-flex xs12 sm6 offset-sm3>
      <v-card> 
        //이미지 넣는거 같음.
        <v-card-media
          src="/static/doc-images/cards/sunshine.jpg"
          height="200px"
        >
        </v-card-media>
        <v-card-title primary-title>
          <div>
            <div class="headline">Top western road trips</div>
            <span class="grey--text">1,000 miles of wonder</span>
          </div>
        </v-card-title>
        <v-card-actions>
          <v-btn flat>Share</v-btn>
          <v-btn flat color="purple">Explore</v-btn>
          <v-spacer></v-spacer>
          <v-btn icon @click.native="show = !show">
            <v-icon>{{ show ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
          </v-btn>
        </v-card-actions>
        <v-slide-y-transition>
          <v-card-text v-show="show">
            I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
          </v-card-text>
        </v-slide-y-transition>
      </v-card>
    </v-flex>

v-card-action는 btn등 action이 동작하는 곳인거 같다. 

v-card-text=> 카드에서 텍스트를 넣는 곳인거 같다.

v-card-primary-title은 뭘까?

모르겠으면 직접 치고 CSS를 보면 된다 . 인성이 행님처럼 ..!!! F12를 누르고 보라.

몰랐던 부분 . 

받아온 데이터가 이미 checkout이 되어 있는 경우는? 

몰랐던 부분

checkout 이전에 들어온 것을 표시해주는 기능. 

오늘 알게 된 새로운 기능 

@change => 이거를 쓰면 변화를 하면 반응을 감지한다. 

1. v-bind:value ="query" 의미 

<자식컴포넌트 v-bind:자식으로전달값(a)="부모가 주는 값(b)" >

:value로 써도됨. 

자식은 props를 가짐. 

props: ['a']가 되면, 부모로 전달받은 b가 a로 들어가고 a는 props로해서 써진다. 

@reset(자식것)=onReset부모것 

=> 자식으로부터 @를 통해서 reset이라는 값이 들어오면, 부모의 것을 실행해준다.

알게된 포인트 정리. 

흐름 정리

일단 궁금증이 뭐냐 ? v-on:submit="onSubmit"을 하면, 

일단 여기에 onSubmit에서 @submit란 놈에 this.inputValue.trim()을 넣어준다. 

근데, props를 통해서 이미 부모에 정의 내려놓은 값을 inputValue로 가지고 있다. 

위에 코드는 부모와 전혀 상관없다.

v-model은 text와 주로 쓰는데 , 양방향 바인딩으로 즉시 inputValue에 값을 넣음

v-on:keyup은 키보드 자판에서 입력이 떨어지는 순간 반응을 함. 

v-show는 넣은 값이 있으면 보여주고 없으면 안보여줌. 

1. <form v-on:submit.prevent="onSubmit"> 

prevent를 쓰면, 리로드 되는 걸 막는다. 

2. 자식 @submit에 있는걸 부모 onSubmit으로 보내줌.