[뷰(Vue)] Vuex, computed

// Vuex

- 모든  컴포넌트가 데이터에 직접 접근할 수 있도록 js 파일에 모든 데이터를 저장하도록 해주는 라이브러리

- 항상 사용하지는 않고, 데이터와 vue 파일이 많을 때 사용한다.

- 컴포넌트 안에서 vuex 데이터를 직접 수정해서는 안 된다.
    > 수정을 원한다면 미리 store.js에 수정 방법을 정의해두고 그 방법대로 컴포넌트에서 소환해서 수정한다.

---

// 설치 및 설정

1. vuex3를 설치한다. (vue2는 vuex3를 사용한다.)

npm install vuex@3.4.0 --save

2. 데이터를 담을 store.js 파일을 생성한다.

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state() {
        return {

        }
    }
});

export default store;

3. main.js에 store.js를 등록한다.

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

4. 컴포넌트에서 데이터바인딩하여 사용한다.

{{ $store.state.등록한 이름 }}

---

// mutations (수정)

1. store.js에 수정 방법 정의

const store = new Vuex.Store({
    state() {
        return {
            name: 'kim',
        }
    },
    mutations: {
        modifyName(state, naming) {
            state.name = naming;
        }
    }
});

2. 컴포넌트에서 소환하여 수정

<button @click="$store.commit('modifyName', 'hanee')"></button>

---

---

// actions (서버 연계 수정)

- ajax를 통해 서버에서 데이터를 가져오고 수정할 때 사용한다.

  ~ store.js

actions : {
  함수명(context){
    axios.get('').then(()=>{ 
      context.commit('mutations함수명') 
    })
    .catch(error => {
        console.log(error);
    });         
  }
}

   ~ 호출한 컴포넌트

<button @click="$store.dispatch('함수명')">더보기</button>

- action 수행 후 data를 변경할 거라면 mutations를 사용해야 한다!

---

// computed

- 컴포넌트 로드 시 한 번 실행되어 그 값을 계속 저장하는 함수이다.

- computed 함수 작성 시 return 을 꼭 써야 한다.

computed : {
  함수명(){
    return
  }
},

- computed 함수 사용 시 함수명만 사용하면 된다.

---

// mapState

- state를 자동으로 computed에 등록해 준다.

import {mapState, mapMutations} from 'vuex'

computed : {
  ...mapState(['state이름1', 'state이름2', ...]),
  ...mapState([{ 새로 작명: 'state이름1', ...}]),
}

methods: {
  ...mapMutations([ '함수명' ]),
  
  ...actions([ '함수명' ]),
}