페이지 공유 데이터 처리
161
작성한 질문수 3
안녕하세요.
단계(step)가 존재하는 페이지 이동시 공유 데이터 처리에 대해 질문 드립니다.
예를 들어
A프로세스 처리를
A-1, A-2, A-3의 페이지로 나뉘어 져 있으며
각 페이지에 입력된 값으로 최종 처리하고
또한 뒤로가기 하였을 경우 각 단계에서 입력된 값은 그대로 유지하여 노출해주어야 할경우입니다.
구글링을 해보면 전역 상태 값이 아니니 pinia 사용은 지양하는 듯하고
localStorage와 같은 기능을 사용하더군요.
이런 기능들을 사용하지 않고 vue3 자체 기능으로 사용할만한 것은 없는지 문의 드립니다.
답변 2
0
여러 컴포넌트 간데 상태는 공유하기 위해서는
부모 컴포넌트에서 생성한 props 를 자식 컴포넌트로 전달
전역 상태 생성 (Pinia)
와 같은 방법을 사용할 수 있습니다.
그리고 클라이언트의 데이터를 "유지"하기 위해서 LocalStorage를 사용하죠.
아마 아시는 방법일 거라 생각되고요.
한가지 언급 드리고 싶은 점은 Pinia vs LocalStorage 상호 배타적인 관계가 아니라 보완적인 관계입니다.
0
안녕하세요, 인프런 AI 인턴입니다.
Vue3에서는 페이지 간에 데이터를 공유하고 상태를 유지하기 위해 몇 가지 방법을 사용할 수 있습니다. 사용자님께서 언급하신 것처럼, 전역 상태 관리 라이브러리인 Pinia나 Vuex를 사용하는 것을 지양하시고, localStorage와 같은 웹 저장소를 사용하지 않으려고 한다면, Vue3의 Composition API를 활용하는 방법을 고려할 수 있습니다.
Composition API를 이용할 때, 공유하고자 하는 데이터를 관리하고 제공하는 컴포저블 함수를 만들 수 있습니다. 이 함수에서는 Vue의 reactive() 또는 ref()를 사용해 반응형 데이터를 생성하고, 이 데이터를 여러 컴포넌트에서 재사용할 수 있도록 합니다. 그리고 Vue3의 provide와 inject 기능을 이용하여 여러 레벨에 걸쳐 컴포넌트 트리에서 데이터를 전달하고 접근할 수 있습니다. 이 방법을 통해 복잡한 컴포넌트 계층 구조에서도 데이터를 쉽게 공유하고 관리할 수 있습니다.
또 다른 방법으로는 Vue Router의 네비게이션 가드와 함께 쿼리 파라미터나 파라미터를 사용하여 페이지 간에 데이터를 전달하는 방법도 있습니다. 이는 URL을 통해 상태를 유지하며 사용자가 뒤로가기를 했을 때에도 이전 상태를 유지할 수 있게 해줍니다.
각 방법은 사용 사례와 요구사항에 따라 선택하여 사용할 수 있으며, 복잡한 상태 관리가 필요하지 않은 경우 Vue3의 기본 기능만으로도 충분히 요구사항을 만족시킬 수 있습니다.
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
37
2
강의듣다가 헷갈려서 질문드립니다.
0
31
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
32
1
질문드립니다.
0
32
2
라우터 인스톨 후 실행안됨
1
49
2
코드 자동 포매팅 질문
0
68
2
필터 watchEffect 질문입니다.
0
51
1
json-server 오류가 다른게 뜨네요
0
113
1
미리보기가 안됩니당...
0
69
2
unplugin-vue-components
0
81
2
TypeError 질문
0
52
1
v-model="show" :show="show" 같이 사용?
1
57
1
hash 모드 배포의 필요성?
0
61
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
98
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
64
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
71
2
중첩된 컴포넌트 문제
0
75
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
328
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
122
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2