[vue.js] Vuex

Vuex 는 언제 쓰는가?
props , custom event 가 복잡할 때 사용하는게 좋다.
props 가 많아지면 버그 찾기도 어렵다.
이 때 사용하는게 Vuex 다.

• Vuex : 모든 컴포넌트가 데이터를 공유할 수 있는 자바스크립트 파일, 한 js파일에 데이터들을 몰아 넣고 모든 컴포넌트가 직접 꺼내쓸 수 있음.

• 단점 : 간단한 코드를 작성할 때 코드가 많이 길어질 수 있음. 데이터가 많이 쓰이는 프로젝트 때 사용하는게 유리.

Vuex 설치

npm install vuex@next --save

데이터 저장 공간 js 파일 생성
store.js 관습

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      name : 'kim'
      이곳에 저장하고 싶은 데이터 Object 형식으로 넣으면 됨.
    }
  },
})

export default store

main.js 등록

import { createApp } from 'vue'
import App from './App.vue'


import mitt from 'mitt'
let emitter = mitt();
let app = createApp(App)
app.config.globalProperties.emitter = emitter;

import store from './store.js'

app.use(store).mount('#app')

vuex 데이터 추출 방법
vue에서 제공하는 $store 사용하면 store에 있는 모든 데이터를 가져올 수 있음

<h4>안녕 {{ $store.state.name }}</h4>

데이터 변경도 가능

Vuex 국룰 : Component 안에서 직접 수정하기는 금지한다.
왜? 데이터를 직접 수정하다보면 추적하기가 어렵다. 컴포넌트 100개 있으면 name을 수정하고 문자열인데 숫자가 들어가면 100개의 컴포넌트를 다 뒤져봐야함.

<h4>안녕 {{ $store.state.name }}</h4>
  <button @click="$store.state.name = 'park'">kim을 park으로 바꾸기</button>

위와 같은 방식 금지!

• 1) 미리 store.js 에 수정방법을 정의함.

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      name : 'kim',
      age : 20
    }
  },

  //변경
  mutations : {
    이름변경(state){
      state.name = 'park'
    }
  },
})

export default store

매개변수로 있는 state는 state() 함수 안에 있는 객체를 이야기함

• 2) 수정하고 싶을 때 store.js 에 부탁

<button @click="$store.commit('이름변경')">kim을 park으로 바꾸기</button>

commit() : store.js 에게 부탁하는 함수, () 안에는 mutation 내에 있는 함수 이름 쓰면 됨.

commit('store.js에 있는 함수', 보낼 데이터)
<button @click="$store.commit('나이변경', 10)">해마다 나이 증가</button>

왜 이런 방법을 사용하는가?
데이터 변경 방법을 store.js에게 주기 때문에 store.js만 확인하면 됨.

---

actions: {}

• 서버로 ajax 요청 보낼 때 사용
• 왜냐면 mutations 함수들을 만들 때 내부에 ajax처럼 오래걸리는 코드를 적어놓으면
  나중에 코드가 길어질 때 힘들어짐
• 또한 의도치 않는 버그를 만날 수 있음, 왜냐하면 자바스크립트는 비동기 처리를 지원하는 언어이기 때문에 one(), two(), one함수에 ajax가 3초이상 걸리는 코드가 있다면 시간이 오래 걸려서 two() 함수가 먼저 실행될 수 있음.

actions : {
  데이터가져오기(){
    axios.get('').then(()=>{ 
      성공시 실행할 코드 
    })
  }
}

// 서버 요청
  actions: {
    getData(context){
      axios.get('https://codingapple1.github.io/vue/more0.json')
        .then((a)=> {
          console.log(a.data);
          context.commit('setMore', a.data);
      })
    }
  }
})

dispatch() 함수로 부탁

<p>{{ $store.state.more }}</p>
  <button @click="$store.dispatch('getData')">게시글 더보기 서버 요청</button>