(vue3, pinia, vuetify 이용) 지난 글 https://moooostory.tistory.com/entry/Vue-Vue-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B012-%EB%8F%99%EC%A0%81-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Dynamic-Component-%EC%9E%90%EC%8B%9D%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-emit-%EC%A0%84%EB%8B%AC [Vue] Vue 정리하기(12) - 동적 컴포넌트(Dynamic Component ), 자식에서 부모 컴포넌트로 emit 전달 오늘은 vue에서 동적..

오늘 할거는 제목 그대로이다 pinia와 typescript가 들어가서 카테고리 분류가 좀 애매하긴한데 vue에 정리를 해보겠다 이 전글 https://moooostory.tistory.com/entry/Vue-Vue-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B010-Pinia-aixos [Vue] Vue 정리하기(10) - Pinia, axios 오늘은 pinia 안에서 axios 쓰는 방법에 대해 알아보자 (사실 뭐 vuex 말고 pinia에서 axios 쓴다고 달라질 거는 거의 없다) 먼저 axios를 사용하기 위해서는 당연히 먼저 설치를 해줘야 한다 터미널에서 n moooostory.tistory.com 여기서 tmdb에서 영화 데이터 불러와서 콘솔창에 출력하는거 까지는 했는데..

오늘은 pinia 안에서 axios 쓰는 방법에 대해 알아보자 (사실 뭐 vuex 말고 pinia에서 axios 쓴다고 달라질 거는 거의 없다) 먼저 axios를 사용하기 위해서는 당연히 먼저 설치를 해줘야 한다 터미널에서 npm install axios 를 해주고 main.js 혹은 main.ts에 app.config.globalProperties.$axios = axios를 추가해 준다 참고로 나는 TMDB에서 인기 영화를 가져와 보겠다 TMDB에서 API 사용하는법은 다른 블로그나 문서도 많으니 찾아보시길 쨌뜬 스토어에서 const getMovieData = () => { axios({ method: "get", url: "https://api.themoviedb.org/3/movie/popular..

저번시간에 이어서 오늘은 Getters와 Actions에 대해 알아보겠다 Getters getters는 vuex에서와 마찬가지로 store에 computed라고 생각하면 될거같다 먼저 store에서 어떻게 정의하는지 봐보자 일단 count라는 state값을 10으로 저장했고 타입은 넘버로 해줬다 굳이 타입 지정 안해줘도 되는데 그냥 한번 해봤다 원래 ts에서 변수 타입 선언할때 const count: number = 10 요렇게 하면 되는데 ref 쓸 때는 저렇게 하는것 같다 무튼 count값에 10을 저장하고 getters에 doubleCount를 정의해 줬다 컴포넌트에서 불러와서 쓰는거는 state를 불러와서 쓰는것과 같다 이런식으로 불러와서 쓰면 되는데 count값을 바꾸는 것 까지 시도를 해봤다 ..

오늘은 pinia에 대해 알아보겠다 캐릭터는 귀엽고 좋네 ㅋㅋㅋ pinia가 뭐냐면 vuex와 같이 vue에서 사용하는 상태관리 라이브러리이다 vue3에서 지정한 공식 상태관리 라이브러리이다 나도 원래는 vuex를 계속 사용하려 했지만 vue3에서 공식 지정하기도 하고 여러가지 장점이 있어서 pinia에 대해 알아보려고 한다 특징과 장점 1. 가볍고 직관적 api pinia는 vuex보다 더 가볍고 직관적이라고 한다 또한 vue3의 Composition API와 함께 사용되어 vue3에서 vuex보다 더 적합하다고 한다 2. TS와 호환 pinia는 타입스크립트와 완전히 호환된다 3. 컴포넌트 단위로 상태를 구성할 수 있다 뭐 이러한 특징과 장점들이 있고 이제 하나하나 뜯어서 어떻게 사용하는지 알아보자 ..