grace's dev_note

Actions Actions는 컴포넌트의 메서드(함수)와 동일합니다. 그리고 defineStore()의 actions 속성으로 정의할 수 있으며 비즈니스 로직을 정의하는 데 완벽합니다. export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++ }, randomizeCounter() { this.counter = Math.round(100 * Math.random()) }, }, }) getter와 마찬가지로 Actinos는 전체 타이핑(및 자동 완성 ✨) 지원을 통해 전체 store 인스턴스에 액세스할 수 있습니다. getters와 달리 Actions는..

Getter는 Store 상태에 대한 computed와 정확히 동일합니다. defineStore()의 getters 속성으로 정의할 수 있습니다. 그들은 화살표 함수의 사용을 장려하기 위해 첫 번째 매개변수로 state를 받습니다. export const useStore = defineStore('main', { state: () => ({ counter: 0, }), getters: { doubleCount: (state) => state.counter * 2, }, }) 대부분의 경우 getter는 state에만 의존하지만 다른 getter를 사용해야 할 수도 있습니다. 이 때문에 일반 함수를 정의할 때 이를 통해 전체 저장소 인스턴스에 액세스할 수 있지만 리턴 타입의 타입(TypeScript에서)을..

State state는 대부분의 경우 Store의 중심 부분입니다. 그리고 개발자들은 대부분 앱을 나타내는 state를 정의하는 것으로 시작합니다. Pinia에서 state는 초기 값을 리턴하는 함수로 정의됩니다. 그리고 이러한 state는 서버, 클라이언트 모두에서 작동할 수 있습니다. import { defineStore } from 'pinia' const useStore = defineStore('storeId', { // 전체 타입 추론에 권장되는 화살표 함수 state: () => { return { // 이 모든 속성은 자동으로 유형이 유추됩니다. counter: 0, name: 'Eduardo', isAdmin: true, } }, }) state 접근하기 기본적으로 store 인스턴스를 ..

Store 정의 Store는 defineStore()를 사용하여 정의합니다. 그리고 매개변수로 유니크한 이름을 전달해야 합니다. import { defineStore } from 'pinia' // useStore는 useUser, useCart와 같을 수 있습니다. // 첫 번째 인수는 애플리케이션 전체에서 스토어의 고유 ID입니다. export const useStore = defineStore('main', { // 다른 옵션... }) id라고도 하는 이 이름은 꼭 필요하며 Pinia에서 Store를 devtools에 연결하는 데 사용합니다. 그리고 반환된 함수의 이름은 use...로 지정하는 것은 사용법을 관용적으로 만들기 위한 composable API 전반에 걸친 규칙입니다. Store 사용..

지현님이 작성해주신 pinia https://metadataplanning.atlassian.net/wiki/spaces/data/pages/93028353 간단한 애플리케이션에서는 우리가 수동으로 만든 상태 관리 시스템으로 충분 하지만 대규모 애플리케이션에서는 고려해야 할 사항이 더 많습니다. 팀과 협업을 위한 강력한 규칙 Timeline, in-component, inspection, time-travel debugging을 포함하는 Vue Devtools와 통합 HMR(Hot Module Replacement) 서버사이드 렌더링 지원 Pinia는 위의 모든 것을 구현하는 상태 관리 라이브러리입니다. Vue 핵심 팀에서 유지 관리하며 Vue2, Vue3에서 모두 동작합니다. 기존 사용자들은 Vue의 ..