반응형 VueJS/VueJS46 [VueJS] Pinia 특정 Store의 상태(State) 초기화 하기 ($reset) 특정 Store State Reset vuex에서 특정 Store의 상태를 초기화하기 위해서는 말 그대로 초기 상태의 객체를 가지고 덮어 씌우는 작업을 하는 방법이 존재했다.(예를 들어 lodash의 cloneDeep 사용) 그러나 특이하게도 Pinia에서는 특정 Store State의 Reset 메서드를 제공해주고 있다. Pinia에서는 Store를 정의하는 방법이 두가지가 존재하는데, 각각의 방법에 따라 Reset 방법에 대해 알아보자. Option Stores (Object Syntax) Options API, Vuex 에서 사용하는 방식과 동일한 구조의 Option Stores 방식부터 알아보자. export const useCounterStore = defineStore('counter', { .. 2022. 10. 4. [VueJS] Pinia Store 기본 사용법 (ft. storeToRefs) Store 기본 사용법 공식문서를 통해 store 기본 사용법에 대해 알아보자. (*이 글은 Composition API 위주로 작성되었다.) 사용법을 익히기 전에 설치가 안되어 있다면 아래 링크를 통해 설치와 설정부터 해주고 오도록 하자. https://mine-it-record.tistory.com/639 [VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정) Pinia란? Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다. 일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용.. mine-it-record.tistory.com 스토어 정의하기 impor.. 2022. 9. 30. [VueJS] Vue3 - setup() 과 <script setup>의 차이 Vue3에서의 Composition API와 setup Vue3의 등장 예고와 함께 사용되어진 Composition API, Vue2.7 버전 미만을 사용할 경우에는 따로 플러그인을 설치해서 사용할 수 있으며, Vue2.7 이상부터는 Vue3처럼 Composition API를 사용할 수 있다. 이 Composition API의 등장과 함께 setup 함수가 등장하였다. 이 setup함수를 사용하여 반응형 데이터를 만들고, 라이프 사이클을 제어하는 등 Vue2 버전에서부터 사용되어 왔던 optioins api에서 사용했던 그 모든것을 Composition API에서는 setup함수 안에서 처리해준다. 그런데 여기서 공식문서를 살펴보면 Composition API의 setup함수가 있고, setup()은 p.. 2022. 9. 28. [VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정) Pinia란? Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다. 일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용해야 한다. Vue에서 가장 보편적으로 사용했던 상태 관리자는 Vuex인데, Vue의 창시자 Even You가 Vuex가 아닌 Pinia를 추천하는 상태 관리자로 공표하였다. 하지만 그렇다고 Vuex가 사라지는 게 아니라 Pinia와 Vuex 5.x는 사실상 완전 동일한 프로젝트로 생각해야 한다고 한다. 이는 현재 Vuex 4.x 버전이나 추후에는 Pinia와 Vuex 5.x 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 것이라고 한.. 2022. 9. 28. [VueJS] (Vue 3) - Vuex 타입 추론 설정하기 본문을 시작하기에 앞 서 아래 링크를 통해 우선 Vuex에서 Typesciprt를 사용하는 방법에 대해 알아온 다음에 이 게시글을 보도록 하자 (아래 게시글을 토대로 작성하였다.) * [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [Vue.. mine-it-record.tistory.com 일단 서론부터 시작하자면 Vuex에서 Typescript를 사용하게 된다면 별다른 설.. 2022. 7. 14. [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) store/index.ts 보통 vue-cli를 통해 프로젝트를 생성하게 되면 index.ts가 기본적으로 생성이 되어있을 텐데, 타입 스크립트를 사용할 때는 index.ts의 경우에는 모든 타입들과, 각각의 저장소들을 한 곳에 모아주는 역할만 담당한다. import { createStore } from "vuex"; import { CreateState, .. 2022. 6. 17. [VueJS] (Vue 3 + TypeScript) - 설정 및 컴포넌트 정의하기 Vue3의 가장 큰 특징 중 하나가 바로 TypeScript와의 호환성이 좋아졌다는 특징이다. Vue2에서는 typescript를 사용하기 위해서는 큰 비용이 들었는데, Vue3에서는 이 단점들을 최대한 보완해서 타입 스크립트와 함께 사용하기 편하도록 개선이 되었다고 한다. 이번 글에서는 TypeScript를 사용하게 되었을때 컴포넌트 정의하는 방식이 어떻게 변했는지 알아보고자 한다. 프로젝트 생성 이쯤되면 Vue CLI를 사용한 프로젝트를 만드는 건 누구나 할 수 있을 거라 생각된다. Vue CLI를 사용하면 당연히 TypeScript를 설치하기 쉽고 설정도 기본적으로 되어있기 때문에 사용하기 편하다. # 1. Install Vue CLI, if it's not already installed npm .. 2022. 6. 14. [VueJS] vue 프로젝트에서 CSS 전처리기(Pre-Processor) 전역 스타일 설정하기 vue 프로젝트에서 CSS 전처리기(예를 들어 sass, scss, less 같은 것들)를 사용할 때 가장 난감한 게, vue는 싱글 파일 컴포넌트 형식으로 .vue 파일 안에 스타일 역시 존재하는데, 여기서 전역으로 설정된 변수 같은 것들을 항상 import 해서 사용해줘야 하는 불편함이 생긴다. 그렇기 때문에 자주 사용하는 변수나, mixin같은 경우 전역 스타일로 설정하여 사용을 해야한다. 전역 스타일 설정은 vue.config.js 파일에서 설정해 주면 된다. // vue.config.js module.exports = { css: { loaderOptions: { // pass options to sass-loader // @/ is an alias to src/ // so this assume.. 2022. 6. 13. [VueJS] vue 프로젝트에서 webpack 설정하는 방법 (vue-cli 와 webpack) 초기 세팅 우선 webpack 설정에 대해 알아보기 위해 vue-cli를 이용한 vue 프로젝트가 만들어져야 한다. [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) VSCode에서 Vue.js 개발 환경을 구축해보자. VueJS는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI인 Vue CLI를 제공한다. 우선 VSCode와 Node.js가 당연히 있다는 가정하에 시작해보도록 한 mine-it-record.tistory.com vue 프로젝트에서 이제 webpack설정을 하기 앞서 vue-cli의 버전이 몇인지부터 알아야 한다. 아무래도 아주 예전부터 사용하.. 2022. 6. 13. 이전 1 2 3 4 5 6 다음 반응형
