inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

actions 소개 및 예제

안녕하세요. 간단히 서버를 만들어서 axios로 비동기 통신하던중 질문드립니다.

417

doqndnffo

작성한 질문수 7

1

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 인지...

es6 vuejs javascript vuex

답변 2

1

doqndnffo

대략적으로 변경한 소스는 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