피니아란 무엇인가요? 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()
    },
  }

더 고급 사용을 위해 정의하기 위해 함수(컴포넌트 setup()와 유사)를 사용할 수도 있습니다. Cases A Store:

• export const useCounterStore = defineStore('counter', () => {
    const count = ref(0)
    function increment() {
      count.value++
    }
  
    return { count, increment }
  })

  setup()Composition API에 아직 익숙하지 않다면 걱정하지 마세요. Pinia는 유사한

  Map helper
(예: Vuex

). 저장소를 같은 방식으로 정의한 다음 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']),
  },
}

자세한 내용은 다음과 같습니다. 핵심 개념의 각

Map Assistant에 대한 정보.

Pinia

Pinia(영어로 "peenya"와 같이 /piːnjʌ/로 발음)를 선택하는 이유는

piña

에 가장 가깝습니다( 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()：

rrreee

您将在核心概念中找到有关每个地图助手的更多信息。

为什么选择Pinia

Pinia（发音为/piːnjʌ/pineapple(스페인어))이며 유효한 패키지 이름입니다. 파인애플은 실제로 여러 개의 과일을 형성하기 위해 함께 결합된 개별 꽃 그룹입니다. 매장과 마찬가지로 각각은 독립적으로 탄생하지만 궁극적으로는 모두 연결되어 있습니다. 남아메리카가 원산지인 맛있는 열대 과일이기도 합니다. 더 현실적인 예

이것은 Pinia

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 ≤4 프로젝트를 Pinia를 사용하도록 변환하는 방법에 대한 자세한 지침은

Vuex에서 마이그레이션 가이드를 참조하세요.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 소개를 방문하세요! !

위 내용은 피니아란 무엇인가요? Vue에서 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!