vue.js4 Pinia - Action ( Option Store ) 이 글은 Vue 3의 공식 Store | Pinia 를 보고 정리한 글입니다. 더 자세한 내용을 원하시면 공식 문서를 참고하세요. 컴포넌트의 method와 동일한 일을 합니다. 이들은 defineStore()에서 actions속성으로 정의할 수 있으며, 처리해야 할 작업의 로직을 정의하는데 완벽합니다 : export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { // `this`에 의존하므로, 화살표 함수를 사용할 수 없음. increment() { this.count++ }, randomizeCounter() { this.count = Math.round(100 * Math.random().. 2023. 1. 2. Pinia - Getter ( Option Store ) 이 글은 Vue 3의 공식 Store | Pinia 를 보고 정리한 글입니다. 더 자세한 내용을 원하시면 공식 문서를 참고하세요. Store 상태에 대한 계산된 값과 정확히 동일합니다.defineStore()내에서 getters 속성으로 정의할 수 있습니다. 화살표 함수의 사용을 권장하기 위해, 첫 번째 인자로 state를 받습니다: export const useCounterStore = defineStore('counter',{ state: () => ({ count : 0, }), getters: { doubleCount: (state) => state.count * 2, }, }) 대부분, Getter는 오직 State에만 의존하지만, 다른 getter를 사용해야 할 수도 있습니다. 이 때문에 일반.. 2023. 1. 2. Pinia - State ( Option Store ) 이 글은 Vue 3의 공식 Store | Pinia 를 보고 정리한 글입니다. 더 자세한 내용을 원하시면 공식 문서를 참고하세요. Pinia에서 상태는 초기 상태를 반환하는 함수로 정의됩니다. 이를 통해 Pinia는 Server측과 Client측 모두에서 작동할 수 있습니다. mport { defineStore } from 'pinia' export const useStore = defineStore('storeId', { // 화살표 함수는 전체 유형 유추을 위해 권장됨. state: () => { return { // 이 모든 속성은 자동으로 유형이 유추됨. count: 0, name: 'Eduardo', isAdmin: true, items: [], hasChanged: true, } }, }) V.. 2023. 1. 2. Vite #1 📢이글은 Vite 가이드를 보고 개인 공부를 위해 정리한 글입니다. Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io Vite /vit/ 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구 Native ES Module을 넘은 다양한 기능 제공 (ex. Hot Module Replacement) 번들링 시, Rollup 기반의 다양한 빌드 커맨드 사용 가능 높은 수준으로 최적화된 Static Resource 를 배포할 수 있게 하며, Pre-configured를 제공 기본적으로 최적화 된 설정 제공. Plugin API 또는 JavaScript API 사용가능 ( + TypeScript 지원 ) 왜 Vite인가 ? 브라우저에서 ES Module 을 .. 2022. 12. 26. 이전 1 다음
