// 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);
}
}
}
});