현12
110
2018-11-08 23:58:38
1
122

Vue.js State 관련 질문 드립니다.


안녕하세요, 학교 프로젝트로 vue.js + django 조합으로 간단한 웹개발을 하고 있는데, state 관련하여 질문이 있어 글을 올립니다. Vuex 는 사용하지 않고 있습니다. (이번 프로젝트로 처음 뷰를 배우는 거라 기초부터 천천히 학습할 시간이 없다는 것을 미리 말씀드립니다.)

구조:
User 에게 여러 Project 가 있고, 각 Project 는 편집이 가능한 text 가 여러 개 있습니다. 유저가 text 를 변형할 때마다 update:text 이라는 이벤트가 trigger 되어 state를 저장하는 방식입니다.

문제점:
State update 방식이 약간 특이합니다. 변화가 있을 때마다 Axios 를 이용해 request body 에 바뀐 내용을 넣어 해당 프로젝트 ID 와 함께 PATCH request 를 보내는 구조입니다. 예를 들어 ‘name’ field 가 바뀌면 ID: project.id, Body: { ‘name’ : ‘newtext.value’ } 이런 식으로요. 이 바뀐 field 는 모두 ‘metadata’ 라는 이름으로 저장됩니다.

그러고 난 후, 다음 그 Project 가 로드될 때, GET request 를 통해 방금 변화된 field 를 metadata에서 다시 받아 다시 제자리로 돌려 놓습니다. { metadata : { { ‘name’ : ‘??’ }, { ‘age’ : ‘!!’ } } } 이라면 ‘name’ 에 ?? 를 넣고, ‘age’ 에 !! 를 넣는 방식입니다.

질문:
여기서 제가 막힌 부분은 ‘PATCH request’를 보내는 타이밍 입니다. 유저가 뭔가를 변형할 때마다 변경된 field 를 다 모아두고, 다른 view 로 라우팅 하기 직전에 request 를 보내고자 합니다. PATCH request 를 여러번 보내면 metadata 가 다 지워져서 한 번 밖에 request를 못 하는데, 어떤 lifecycle hook 을 이용해야 할지 모르겠습니다. beforeDestroy() 에서 request 를 보내야 할까요…? beforeUnload() 를 써야할까요?

한계: 
백단을 바꾸거나 새로운 state 프레임워크를 사용하는 것은 어려울 것 같습니다. 

조금 더 천천히 배워서 개발해보고 싶은데 그럴 시간이 충분하지 않아 이렇게 복잡한 질문을 올립니다. 더 필요하신 정보가 있으시면 업데이트 가능하니 댓글 달아주시면 감사하겠습니다. 이러한 workflow 에 관련하여 읽어볼만한 리소스를 추천해주셔도 감사히 받겠습니다.
0
0
  • 답변 1

  • XeO3
    210
    2018-11-09 09:07:15 작성 2018-11-09 12:37:06 수정됨

    beforeDestroy 에서 하시면 될듯합니다.

    vue router 쓰신다면 beforeRouteLeave 도 괜찮을듯 하네요.

    브라우저를 닫거나 다른사이트로 이동시에도 request를 보내야 한다면 beforeUnload를 쓰셔야 할겁니다.


    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.