Vue.js 데이터 주고받기 - Vuex 라이브러리

1. 데이터 주고받는게 어렵고 복잡함 -> Vuex가 나옴
    모든 Component들이 데이터를 한 곳에서 공유할 수 있는 개념
    컴포넌트, 데이터가 많을 때 Vuex 쓰자.
    그 외엔 props 쓰는 게 코드양이 더 적음.

2. Vuex 사용법
    1) store.js 파일 만들기

    2) main.js에 store.js 추가

import store from './assets/store'
app.use(store).mount('#app');

    3) 기본 코드 작성

import { createStore } from 'vuex'

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

export default store

3. vuex 설치 에러 
    원인: vue3에는 vuex4 설치해야하는데 나는 vuex3 설치함
    에러 메시지: export 'createStore' was not found in 'vuex'
    해결법
    

    1) vuex3 삭제

npm uninstall --save vuex

    2) vuex4 설치

npm install --save vuex@next

    어쩐지 설치할 때 error를 내뱉더라..
    --force로 걍 설치한 게 화근

4. vuex 데이터 참조
    $store.state.name 처럼 빼서 쓰면 됨

5. vuex는 데이터를 컴포넌트에서 수정하면 안되고 store.js에 수정 방법을 정의해서 사용해야 한다.
    컴포넌트마다 데이터를 수정하면 컴포넌트가 100개, 200개 됐을 때 디버깅 못한다..

 

6. vuex에서 데이터 수정 방법을 정의해서 사용하는 예시

// 수정 방법 정의
const store = createStore({
  state(){
    return {
        name: 'kim',
        age: 20,
    }
  },
  mutations: {
      changeName(state){
          state.name = 'park'
      },
      addAge(state, payload){
          state.age += payload;
      }
  }
})

// 사용
<button @click="$store.commit('changeName')">버튼</button>
<button @click="$store.commit('addAge', 10)">나이추가</button>

    이렇게 사용하는 이유는 state 값이 이상할 경우 store만 검증해보면 되기 때문이다.

 

7. vuex3 actions
    AJAX 요청할 때 사용
    오래걸리는 작업을 할 때 사용
    actions에서 데이터를 수정하고자 할 때에도 mutations를 호출해줘야 한다.

const store = createStore({
    state() {
        return {
            more: {},
        }
    },
    mutations: {
         setMore(state, payload){
            state.more = payload;
        }
    },

 actions: {
getData(context) {
            axios

.get("https://codingapple1.github.io/vue/more1.json")

.then((payload) => {

context.commit('setMore', payload.data);

})

       }
    },
})

 

8. computed 함수는 사용해도 매번 실행되지 않음. 처음 실행한 값을 간직함
    값이 바뀔때만 실행되고 그렇지 않으면 예전에 실행한 값을 그대로 씀
    매번 연산을 하지 않기 때문에 성능상 이점이 있음

9. computed 함수는 <template>에서 사용할 때 소괄호 붙이지 않는다.

<p>{{computedFunc}}</p>

10. mapState쓰면 state 꺼내쓰는 코드가 짧아짐

export default {
  computed: {
    name(){
      return this.$store.state.name
    }
  },
}

// 위와 동일한 역할
import {mapState} from 'vuex'

export default {
  computed: {
    ...mapState(['name', 'age', 'likes']),
    ...mapState({ 'myMore' : 'more'}),
  },
}

11. vuex mutations도 한번에 꺼내쓸 수 있음

import {mapMutations} from 'vuex'

export default {
 methods: {
    ...mapMutations(['changeName', 'setMore', 'pressLike']),
    },
}

12. vuex actions도 mutations와 마찬가지로 mapActions 쓰면 됨