3. vue-news app (Store 구현)

이전 포스팅에서 axios를 이용하여 데이터를 가져오고 화면에 보여주는 기능까지 구현 하였다.

이전에도 포스팅했던 vuex를 vue-news에도 적용하자.

기억이 안난다면 이전 포스팅을 참조하자.
Vuex 포스팅

store폴더에 메인 역할인 index.js를 생성하고 getters.js, mutations.js, actions.js를 생성하자.

아직 getters는 쓸일이 없어 생략한다.

actions.js

import {
  fetchNews,
  fetchAsk,
  fetchJobs,
} from '../api/index.js';

export default {
  FETCH_NEWS({ commit }) {
    return fetchNews().then(response => commit('SET_NEWS', response.data));
  },
  FETCH_ASK({ commit }) {
    return fetchAsk().then(response => commit('SET_ASK', response.data));
  },
  FETCH_JOBS({ commit }) {
    return fetchJobs().then(response => commit('SET_JOBS', response.data));
  },
}

api를 사용해야 하기 때문에 import를 받아온다.
이전에도 설명 했듯이

import {
  fetchNews,
  fetchAsk,
  fetchJobs,
} from '../api/index.js';

이렇게 받아와도 되고

import * as API from '../api/index.js';

이렇게 alias를 이용하여 받아올 수도 있다.(취향껏 사용하도록.)

향상된 객체 표기법으로 인해

FETCH_JOBS: ({ commit }) => {
    return fetchJobs().then(response => commit('SET_JOBS', response.data));
}

키 : 값 형태에서

FETCH_JOBS({ commit }) {
    return fetchJobs().then(response => commit('SET_JOBS', response.data));
}

로 변경이 가능하다.

mutations.js

export default {
  SET_NEWS(state, news) {
    state.news = news;
  },
  SET_ASK(state, ask) {
    state.ask = ask;
  },
  SET_JOBS(state, jobs) {
    state.jobs = jobs;
  }
}

만든 actions, mutations를 index.js에 등록하고 사용해보자.

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';

Vue.use(Vuex);

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    news: [],
    ask: [],
    jobs: [],
    user: {},
    item: {}
  },
  getters,
  mutations,
  actions,
})

마찬가지로 향상된 객체 표기법으로 인해

getters: getters,
mutations: mutations,
actions: actions

를

getters,
mutations,
actions

로 변경할 수 있다.

기능별로 파일이 분리되어 훨씬 깔끔한 코드로 변경되었다.

AskView.vue

<template>
  <div>
    <p v-for="ask in this.$store.state.ask" :key="ask.id">
      <a :href="ask.url">{{ ask.title }}</a><br>
      <small>{{ ask.time_ago }} by {{ ask.user }}</small>
    </p>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.dispatch('FETCH_ASK')
      .then(() => console.log('success'))
      .catch(() => console.log('fail'));
  }
}
</script>

출처 : Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념