Pinia
-
이번 post에서는 pinia의 부가적인 기능들에 대해 살펴보자. 내장 함수들 $subscribe watch와 유사하게 store의 $subscribe 함수를 이용하면 state의 상태 변화를 모니터링할 수 있다. $subscribe의 콜백 함수에는 mutation과 state 객체가 전달되는데 mutation에는 변경에 대한 상세한 정보가 추가된다. todoStore.$subscribe((mutation, state) => { console.log("변경됨: ", state); console.log(`mutation type: ${mutation.type}`); // direct | patch object | patch function console.log(`mutation storeId: ${muta..
[vue3-pinia] 03. 기타이번 post에서는 pinia의 부가적인 기능들에 대해 살펴보자. 내장 함수들 $subscribe watch와 유사하게 store의 $subscribe 함수를 이용하면 state의 상태 변화를 모니터링할 수 있다. $subscribe의 콜백 함수에는 mutation과 state 객체가 전달되는데 mutation에는 변경에 대한 상세한 정보가 추가된다. todoStore.$subscribe((mutation, state) => { console.log("변경됨: ", state); console.log(`mutation type: ${mutation.type}`); // direct | patch object | patch function console.log(`mutation storeId: ${muta..
2023.10.15 -
이번 포스트에서는 vue에서 사용되는 pinia에 대해 살펴보자. Pinia 개요 스토어?스토어란 특정 컴포넌트에 바인딩되지 않은 상태 또는 처리해야 할 일의 로직을 가지는 것이다. 즉 모두가 사용하는 전역 상태를 호스팅 한다. 따라서 스토어에 저장된 정보는 모든 페이지나 컴포넌트에서 공유될 수 있는 것이다.이렇게 이야기 하면 많은 경우 스토어를 만능 저장소로 생각해서 모든 데이터를 빨아들이는 블랙홀로 생각할 수 있는데 당연히 지양해야 할 태도다. 우리가 프로그래밍 하다 보면 전역 변수의 사용이 많지 않은 것과 같은 이유이다.스토어에 저장할만한 정보는 여러 페이지에서 보여지는 사용자의 로그인 정보나 다단계를 거쳐서 구성되는 복잡한 데이터 등이다. 상태 관리를 한다고 해서 Pinia를 데이터베이스 처럼..
[vue3-pinia] 01. Pinia 개요이번 포스트에서는 vue에서 사용되는 pinia에 대해 살펴보자. Pinia 개요 스토어?스토어란 특정 컴포넌트에 바인딩되지 않은 상태 또는 처리해야 할 일의 로직을 가지는 것이다. 즉 모두가 사용하는 전역 상태를 호스팅 한다. 따라서 스토어에 저장된 정보는 모든 페이지나 컴포넌트에서 공유될 수 있는 것이다.이렇게 이야기 하면 많은 경우 스토어를 만능 저장소로 생각해서 모든 데이터를 빨아들이는 블랙홀로 생각할 수 있는데 당연히 지양해야 할 태도다. 우리가 프로그래밍 하다 보면 전역 변수의 사용이 많지 않은 것과 같은 이유이다.스토어에 저장할만한 정보는 여러 페이지에서 보여지는 사용자의 로그인 정보나 다단계를 거쳐서 구성되는 복잡한 데이터 등이다. 상태 관리를 한다고 해서 Pinia를 데이터베이스 처럼..
2023.10.14