[24.06.05] Vue.js_Pinia 상태 관리

01. provide/ inject

주로 페이지 최상위에서 사용한다.

• app에서 다 관리하기 힘드니까

namespace

• provide 첫번째로 적는 문자열

02.전역상태관리

1. 피니아 : 어디든 가능

• 어디서든 써먹을 수 있다
• 전역상태 관리 용도

1) provide는 같은 계층에서만 쓸 수 있다
2) 장점 : 클로저 기반이라 필요한거 바로 쓸 수 있다

• 직관적이다.

03.날짜시간

1. 날짜

1) js

• 통신할때, 문자열로 변환 → 복원 → 다시 숫자date()로 변환

2) java

• gson : 문자로
• jackson : 숫자로

2. 시간

1) js

• Date
• moment 라이브러리 사용해서 해결
• formatting : 패턴으로 문자열 만드는것 → 메서드도 거의 포맷임
  • 날짜가 가지고 있는 객체로 패턴 만든다 → “yyyy-mm-dd hh:mm:ss”
• parsing : 문자열을 분석한다.
  • 포맷팅과 반대

2) java

• Date
• LocalDate

04. 가정

1. 완료목표일 추가

2. 등록순, 타이틀, 완료목표일순 : coputed 속성 필요한데 어디에다가 정의?

• 스토어에다가 해도 되지만, 비권장 → 스토어는 순수 데이터만 쓴다
• 지지고 볶고 하는건 사용자가 알아서 해라

APP에서 하는게 좋다

• 겍체를 문자화해서 정렬 → sort안에 함수로 넣어야한다.
  • 2개의 매개변수가 들어온다.
  • 타이틀순으로 정렬할거니까 ⇒ a.todo, b.todo 비교
    

다중if문으로 정렬

💡 **이렇게 하면 제목순으로 정렬이 된다.**

v-for in 누구? 로 돌려야하나

• mode = 0,1,2 생성
• sortList coputed 생성 → mode별로 정렬할 수 있게 한다.
  

05. 필수

1. 라우터

2. 백엔드 통신

3. 상태관리

06. 순서

1. db.json 작성

• 데이터는 비어있음 json으로 가져오니까

2. 데이터 항목 결정

• 리엑티브로 연결

3. 스토어 정의

• 어제 썼던 app 핸들러들을 스토어에 가져옴
  

4. get 쿼리 넣고 싶을때

1) 직접쓰기
2) params 으로 가져오기 → 쿼리 스토어

• 라우터의 paras와 다르다.
• 객체로 작성하면 자동으로 인식
• async 매개변수로 넣으면 params만 써도 가능(객체안써도된다.)
  

5. promise 대신 async await 쓰는 이유 : 콜백헬 피하려고

• 근데 왜 콜백 썼죠? → 리턴값이 프라미스라서
  

• 콜백없이 쓸 수 있는 방법
  

💡 **이렇게 변경 가능**

07. async await

1. await 있을때

• 왼쪽이 프라미스 then 의 데이터에 해당한다.
• 리턴값을 지정안하면, undefinded가 나온다. → 값을 지정해줘야 그값이 리턴됨

2.await 없을때

• data 가 프라미스가 됨
  

※ 추가 설명
다른 사람이랑 같이 사용할때,
→ APP 에다가 목록보기 호출하면 안되고, 목록보기 페이지에다가 호출해야한다.
→ 수정, 추가할때 새로고침 안눌러도 적용해야하기 때문에