기존 파일 구조(src/store/index.js)

src/store/index.js 안의 내용(모듈화 효과 확인을 위해 임의로 복잡하게 만들어둠)

import Vue from "vue";
import Vuex from "vuex";
import { fetchNewsList, fetchJobsList, fetchAskList } from "../api/index.js";

Vue.use(Vuex);

export const stroe = new Vuex.Store({
  state: {
    news: [],
    jobs: [],
    ask: [],
  },
  getters: {
    fetchedAsk(state) {
      return state.ask;
    },
  },
  mutations: {
    SET_NEWS(state, news) {
      state.news = news;
    },
    SET_JOBS(state, jobs) {
      state.jobs = jobs;
    },
    SET_ASK(state, ask) {
      state.ask = ask;
    },
  },
  actions: {
    FETCH_NEWS(context) {
      fetchNewsList()
        .then((response) => {
          context.commit("SET_NEWS", response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    FETCH_JOBS({ commit }) {
      fetchJobsList()
        .then(({ data }) => {
          commit("SET_JOBS", data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    FETCH_ASK({ commit }) {
      fetchAskList()
        .then(({ data }) => {
          commit("SET_ASK", data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
});

리팩토링 후 파일 구조

src/store/index.js

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

Vue.use(Vuex);

export const stroe = new Vuex.Store({
  state: {
    news: [],
    jobs: [],
    ask: [],
  },
  getters: {
    fetchedAsk(state) {
      return state.ask;
    },
  },
	mutations, //속성에 연결
  actions, 
});

src/store/mutations.js(새로 생성)

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