피니아란 무엇인가요? Vue에서 어떻게 사용하나요?
피니아란 무엇인가요? 피니아를 사용하는 이유는 무엇입니까? 이번 글에서는 피니아에 대해 소개하고, 예제를 통해 피니아의 기본적인 사용법을 소개하겠습니다.
피니아란?
Pinia는 원래 Composition API를 사용하여 Vue 스토어의 모양과 느낌을 다시 디자인하기 위한 2019년 11월 경의 실험이었습니다. 그때부터 원래 원칙은 여전히 동일하지만 Pinia는 Vue 2 및 Vue 3 에서 작동하며 컴포지션 API 를 사용할 필요가 없습니다. installation 및 SSR을 제외하고 둘 다의 API는 동일하며 문서는 Vue 3에만 해당되며 필요한 경우 Vue 2에 대한 설명이 포함되어 Vue 2 및 Vue 3 사용자 모두 읽을 수 있습니다! 【관련 추천: vue.js 동영상 튜토리얼】
왜 Pinia를 사용하나요?
Pinia는 구성 요소/페이지 전체에서 상태를 공유할 수 있는 Vue용 저장소입니다. ç 이는 단일 페이지 응용 프로그램의 경우에 해당되지만, 서버 측에서 렌더링되는 경우 응용 프로그램이 보안 취약성에 노출됩니다. 하지만 작은 단일 페이지 애플리케이션에서도 Pinia를 사용하면 많은 이점을 얻을 수 있습니다.
-
개발 도구 지원
- 작업, 돌연변이에 대한 타임라인 추적
- 스토어는 이를 사용하는 구성 요소에 나타납니다
- 시간 여행 및 더 쉬운 디버깅 모듈 교체
페이지를 재 장전하지 않고 기존 상태를 재 장전하지 않고 매장을 수정합니다. 적절한 TypeScript 지원 또는 - 자동 완성
- 서버 측 렌더링 지원
기본 예 -
이것은 pinia를 API 방식으로 사용하는 것과 같습니다(전체 지침을 보려면
시작하기 를 확인하세요). 먼저 스토어를 생성합니다: // stores/counter.js import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => { return { count: 0 } }, // could also be defined as // state: () => ({ count: 0 }) actions: { increment() { this.count++ }, }, })
로그인 후 복사그런 다음 컴포넌트에서 사용 :
import { useCounterStore } from '@/stores/counter' export default { setup() { const counter = useCounterStore() counter.count++ // with autocompletion ✨ counter.$patch({ count: counter.count + 1 }) // or using an action instead counter.increment() }, }
로그인 후 복사 더 고급 사용을 위해 정의하기 위해 함수(컴포넌트 - Map helper
export const useCounterStore = defineStore('counter', () => { const count = ref(0) function increment() { count.value++ } return { count, increment } })
로그인 후 복사(예: Vuex
setup()
와 유사)를 사용할 수도 있습니다. Cases A Store: mapStores()
, mapState()
또는 mapActions()
를 사용합니다. const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
}
}
})
const useUserStore = defineStore('user', {
// ...
})
export default {
computed: {
// other computed properties
// ...
// gives access to this.counterStore and this.userStore
...mapStores(useCounterStore, useUserStore)
// gives read access to this.count and this.double
...mapState(useCounterStore, ['count', 'double']),
},
methods: {
// gives access to this.increment()
...mapActions(useCounterStore, ['increment']),
},
}
로그인 후 복사
자세한 내용은 다음과 같습니다. 핵심 개념의 각 const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { double: (state) => state.count * 2, }, actions: { increment() { this.count++ } } }) const useUserStore = defineStore('user', { // ... }) export default { computed: { // other computed properties // ... // gives access to this.counterStore and this.userStore ...mapStores(useCounterStore, useUserStore) // gives read access to this.count and this.double ...mapState(useCounterStore, ['count', 'double']), }, methods: { // gives access to this.increment() ...mapActions(useCounterStore, ['increment']), }, }
Pinia
Pinia(영어로 "peenya"와 같이 /piːnjʌ/
로 발음)를 선택하는 이유는
에 가장 가깝습니다( setup()
)来为更高级的用例定义一个 Store:
import { defineStore } from 'pinia' export const todos = defineStore('todos', { state: () => ({ /** @type {{ text: string, id: number, isFinished: boolean }[]} */ todos: [], /** @type {'all' | 'finished' | 'unfinished'} */ filter: 'all', // type will be automatically inferred to number nextId: 0, }), getters: { finishedTodos(state) { // autocompletion! ✨ return state.todos.filter((todo) => todo.isFinished) }, unfinishedTodos(state) { return state.todos.filter((todo) => !todo.isFinished) }, /** * @returns {{ text: string, id: number, isFinished: boolean }[]} */ filteredTodos(state) { if (this.filter === 'finished') { // call other getters with autocompletion ✨ return this.finishedTodos } else if (this.filter === 'unfinished') { return this.unfinishedTodos } return this.todos }, }, actions: { // any amount of arguments, return a promise or not addTodo(text) { // you can directly mutate the state this.todos.push({ text, id: this.nextId++, isFinished: false }) }, }, })
如果您仍然不熟悉setup()
Composition API,请不要担心,Pinia 还支持一组类似的地图助手,例如 Vuex。您以相同的方式定义存储,但随后使用mapStores()
、mapState()
或mapActions()
:
您将在核心概念中找到有关每个地图助手的更多信息。
为什么选择Pinia
Pinia(发音为/piːnjʌ/
pineapple(스페인어))이며 유효한 패키지 이름입니다. 파인애플은 실제로 여러 개의 과일을 형성하기 위해 함께 결합된 개별 꽃 그룹입니다. 매장과 마찬가지로 각각은 독립적으로 탄생하지만 궁극적으로는 모두 연결되어 있습니다. 남아메리카가 원산지인 맛있는 열대 과일이기도 합니다. 더 현실적인 예
JavaScript
에서도 유형을 사용할 API의 더 완전한 예입니다. 일부에게는 더 읽지 않고도 시작하기에 충분할 수 있지만 나머지 문서를 검토하거나 이 예를 건너뛰고핵심 개념을 모두 읽은 후 다시 돌아오는 것이 좋습니다. rrreeeVuex와의 비교
Pinia는 Vuex 철학에 최대한 가깝도록 노력합니다. 이는 Vuex의 다음 반복에 대한 제안을 테스트하기 위해 설계되었으며 현재 Pinia가 사용하는 것과 매우 유사한 API를 사용하는 Vuex 5용 공개 RFC를 보유하고 있으므로 성공적이었습니다. Pinia의 저자인 저(Eduardo)는 Vue.js 핵심 팀의 일원으로 Router, Vuex 등의 API 설계에 적극적으로 참여했다는 점을 참고하시기 바랍니다. 이 프로젝트에 대한 나의 개인적인 의도는 Vue의 접근 가능한 철학을 유지하면서 글로벌 매장 사용 경험을 재설계하는 것이었습니다. 사람들이 Vuex로 더 쉽게 마이그레이션하고 향후 두 프로젝트(Vuex 아래)를 병합할 수 있도록 계속해서 Pinia의 API를 Vuex에 가깝게 유지합니다.
RFC
Vuex는 RFC를 통해 커뮤니티로부터 최대한 많은 피드백을 수집하지만 Pinia는 그렇지 않습니다. 저는 앱을 개발하고, 다른 사람의 코드를 읽고, Pinia를 사용하여 클라이언트를 위해 일하고, Discord에서 질문에 답변한 경험을 바탕으로 아이디어를 테스트합니다. 이를 통해 다양한 상황과 애플리케이션 규모에 적합한 효율적인 솔루션을 제공할 수 있습니다. 저는 자주 릴리스하고 핵심 API를 변경하지 않은 채 라이브러리를 계속 발전시킵니다.
Vuex 3.x/4.x
Vuex 3.x는 Vue 2용 Vuex이고 Vuex 4.x는 Vue 3
Pinia API는 Vuex ≤4와 매우 다릅니다. 예:
- Mutation은 더 이상 존재하지 않습니다. 그들은 종종 매우 자세한으로 간주됩니다. 그들은 원래 devtools 통합을 가져왔지만 더 이상 문제가 되지 않습니다.
- TypeScript를 지원하기 위해 사용자 정의 복잡한 래퍼를 만들 필요가 없으며 모든 것이 입력되며 API는 가능할 때마다 TS 유형 추론을 활용하는 방식으로 설계되었습니다.
- 더 이상 마법 문자열을 삽입하거나, 함수를 가져오거나, 호출하거나, 자동 완성을 즐기지 마세요!
- 스토어를 동적으로 추가할 필요가 없습니다. 기본적으로 모두 동적이므로 눈치채지도 못할 것입니다. 언제든지 스토어를 사용하여 수동으로 가입할 수 있지만 자동으로 가입되므로 걱정할 필요가 없습니다.
- 더 이상 모듈의 중첩 구조가 없습니다. 다른 매장 내에서 매장을 가져와 사용하여 암묵적으로 매장을 중첩할 수 있지만 Pinia는 매장 간 교차 결합을 지원하면서 설계상 평면 구조를 제공합니다. 스토어에 대한 순환 종속성을 가질 수도 있습니다. 모듈
- 에는 네임스페이스가 없습니다. 저장소의 평면 아키텍처를 고려할 때 "네임스페이스가 있는" 저장소는 정의된 방식에 내재되어 있으며 모든 저장소가 네임스페이스가 있다고 말할 수 있습니다.
Vuex에서 마이그레이션 가이드를 참조하세요.
더 많은 프로그래밍 관련 지식을 보려면프로그래밍 소개를 방문하세요! !
위 내용은 피니아란 무엇인가요? Vue에서 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.
