vuex 활용 비교

 

vuex 비교

vuex 없이 데이터를 호출해보자

 

1. api 등록

api는 요로코롬 해커뉴스 api를 활용

import axios from 'axios';

// 1. HTTP Request와 Response와 관련된 기본 설정을 따로
const config = {
  baseUrl: 'https://api.hnpwa.com/v0/'
};

// 2. API 함수들을 정리
function fetchList() {
  return axios.get(`${config.baseUrl}news/1.json`);
}

export {
  fetchList,
}

 

 

2. view에서 created시 등록한 api를 냅다 호출하고 뿌림

<script>
import { fetchList } from '../api/index'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    // this가 Vue 인스턴스(컴포넌트)로 연결하기 위해 vm 정의
    var vm = this;

    fetchList()
      .then((response)=>{
        vm.users = response.data;
      })
      .catch((error) => {
        // 에러처리
      })
    
  }
}
</script>

<template>
  <div>
    vuex 안씀
    <div v-for="(item, index) in users" :key="index">
      {{ item.user }}
    </div>
  </div>
</template>

 

끝

---

 

vuex 활용하여 데이터를 호출해보자

1. api 등록

api 등록은 똑같다

 

2. store 등록

action, mutations를 모듈화하였다.

(state도 나누고싶으면 나눌 수 있음)

Vue.use(Vuex);

// 모듈화
import mutations from './mutations';
import actions from './actions';

export const store = new Vuex.Store({
  // actions으로 api를 통해 받아온 데이터를 mutation가 state로 넘겨줌
  actions,
  mutations,
  state: {},
})

 

 

3. 데이터를 저장해둘 state를 등록

  state: {
    list: [],
  },

 

4. mutations에서는 받아온 데이터를 state에 넘겨줄 mutation을 등록

// mutations.js

export default {
  SET_MUTATION(state, data) {
    state.list = data;
  },
}

 

5. actions에서 api를 호출하고 등록한 mutation으로 받은 데이터를 가져올 수 있는 action을 등록

// actions.js

import { fetchList } from '../api/index'

export default{
    async FETCH_ACTION(context) {
      try {
        const response = await fetchList();
        // mutations 호출!
        context.commit('SET_MUTATION', response.data)
        // 결과값이 return되어야 순서를 보장할 수 있음 **
        return response;
      } catch (error) {
        // 에러처리
      }   
    },
}

 

 

6. view에서는 그냥 등록한 action을 호출하고

<script>
export default {
  created() {
    // ▼ dispatch를 통해 코드 제어 넘기기
    this.$store.dispatch('FETCH_ACTION')
  }

}
</script>

 

 

7. 바로 state에서 꺼내 쓰면 끝

<template>
  <div>
    vuex 씀
    <div v-for="(item, index) in this.$store.state.list" :key="index">
      {{ item.title }}
    </div>
  </div>
</template>

 

끝

---

 

앵? vuex를 쓰니까 더 번거로운데???

하지만 새로운 게 추가될 때 마다 ㄹㅇ 훨씬 편하다..