안녕하세요. 간단히 서버를 만들어서 axios로 비동기 통신하던중 질문드립니다.
417
작성한 질문수 7
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex);
const storage = {
fetch() {
const headers = {
'Content-Type' : 'application/json',
'Accept' : 'application/json'
};
return axios.get("http://localhost:8080/todo/list", {headers})
.then(response => {
console.log(response.data.result); //이부분 출력시는 잘나옴..
return response.data.result //리턴하면 Promise가 todoItems에 Object로 들어감...
});
/*
if (localStorage.length > 0) {
for (let i =0; i < localStorage.length; i++) {
if(localStorage.key(i) != 'loglevel:webpack-dev-server') {
let value = JSON.parse(localStorage.getItem(localStorage.key(i)));
arr.push(value);
}
}
}
*/
}
};
export const store = new Vuex.Store({
state: {
todoItems : storage.fetch()
},
mutations : {
addOneItem(state, todoItem) {
const obj = {
seq : null,
completed : false,
item : todoItem
};
//localStorage.setItem(todoItem, JSON.stringify(obj));
state.todoItems.push(obj);
},
removeOneItem(state, payload) {
localStorage.removeItem(payload.todoItem.item);
state.todoItems.splice(payload.index, 1);
},
toggleComplete(state, payload){
state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;
localStorage.removeItem(payload.todoItem.item);
localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem));
},
clearTodo(state) {
state.todoItems = [];
localStorage.clear();
}
},
actions : {
add(context, payload) {
return axios.post("http://localhost:8080/todo/add", payload, {
headers : {
'Content-Type' : 'application/json;charset=utf-8'
}
}).then(response => context.commit('addOneItem', response));
}
}
});
안녕하세요. 비동기통신을 하던중 서버에서 데이터를 잘 가져왔고 response를 console로 찍었을떄 Array가 나왔는데 이제 fetch 함수에서 todoItems를 초기화해줄떄 Promise라는 객체로 들어가게 됩니다. ㅠㅠ
예제처럼 arr로 들어가게 하고싶은데 혹시 어떻게 해야할까요..?ㅠㅠ 강의중 말씀하신 Promise 인지...
답변 2
1
대략적으로 변경한 소스는 fetch 함수부분이고 todoItems를 http 통신으로 가져와서 초기화 한후 add, delete 등등 적용해보려고 하였으나 Promise 객체가 등장한 이후 array로 초기화되지 않아서 어려움이 있습니다ㅠㅠ
0
안녕하세요 doqndnffo님, 좋은 질문이네요! 중급 강좌에서 바로 axios를 붙이실 생각을 하다니 잘하신 것 같습니다 :) 제가 바로 알아볼 수 있게 코드랑 설명 잘 첨부해주셔서 감사하구요. 위 코드를 보니 state 쪽 코드가 수정되어야 할 것 같습니다. 일단 fetch()의 결과는 Promise 객체가 되구요. 일반적으로는 컴포넌트 라이프 사이클이나 라우터 네비게이션 가드 쪽에서 axios get 요청을 한 다음에 받아오면 state에 담아줍니다.
위와 같은 구조는 제 수업 내용에 바로 비동기 처리를 적용하다보니 구조가 적합하지 않게 된 것인데요. 만약 그래도 무조건 여기서 데이터를 받아와야겠다 하신다면 store.fetch를 한번 더 Promise로 감싸거나 Promise.resolve() 같은 API를 활용해야 할 것 같습니다 :)
Chrome 개발자 모드 확장이 안됨
0
258
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
280
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
368
3
로컬 스토리지는 어디에 있나요?
1
279
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
387
2
export default 관련한 질문
0
354
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
354
2
깃허브에 문제있는것 같습니다.
1
273
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
303
2
addTodo Helper 함수 적용
1
243
1
vuex 헬퍼 전역 설정
1
245
2
github 권한요청드립니다.
1
258
2
이벤트 위치에 대한 궁금증 입니다.
1
223
2
구조 차이에 대한 문의
1
345
2





