stores/index.js

// CMD> npm i vuex@next --save
import {createStore} from 'vuex';
import axios from 'axios';
export default createStore({

// 상태변수(전역변수)
// 어떤 컴포넌트에서 바꿀수 있는 변수
state : {
    counter : 20,
    menu    : 'home',
    items   : [],
},

// 결과 값을 가지고 가는 메소드
getters : {
    getItems(state) {
        return state.items;
    },

    getMenu(state) {
        return state.menu;
    },

    getCounter(state) { // 그대로 값
        return state.counter;
    },

    getCounter1: state => { // 가공된 값
        return state.counter * 2;
    }
},

// 결과 값을 바꾸는 것(동기)
mutations : {
    setItems: (state, value) => {
        state.items = value;
    },

    setMenu: (state, value) => {
        state.menu = value;
    },

    setCounter: (state, value) => {
        state.counter = value;
    },

    setCounter1 (state, value) {
        state.counter = value + 100;
    }
},

// 결과 값을 바꾸는 것(비동기)
actions : {
    // actionCounter(context, payload){
    //     const value = payload.counter;
    //     //위에 생성되어 있는 setConter을 호출함.
    //     context.commit('setCounter', value);
        
    //     //context.getters 나 context.state에 접근
    // },

    async handleData(context, payload) {
        const page = payload.page;

        const url = `http://ihongss.com/json/board.json?page=${page}`
        const headers = {"content-Type":"application/json"};
        const response = await axios.get(url, {headers:headers});
        if(response.data.ret === 'y') {
            context.commit('setItems', response.data.data);
        }

    }
}

});