Vue의 차세대 상태 관리 라이브러리인 Pinia에 대해 알아보세요.

피니아란 무엇인가요? 사용하는 방법? 이 기사는 차세대 상태 관리 라이브러리인 Vue를 소개합니다. Pinia가 도움이 되기를 바랍니다.

Pinia란 무엇입니까

Pinia(스페인어로 파인애플)는 본질적으로 여전히 상태 관리 라이브러리이며 구성 요소와 페이지 전체에서 상태를 공유하는 데 사용됩니다. [관련 권장 사항: vue.js 비디오 튜토리얼]

pinia와 vuex의 차이점:

• 보다 친숙한 TypeScript 지원, Vuex의 이전 TS 지원은 매우 불친절했습니다

• Vuex와 비교하여 Pinia는 더 적은 수의 의식으로 더 간단한 API 제공

• 더 이상 중첩된 모듈 구조가 없습니다

• 더 이상 네임스페이스 개념이 없으므로 복잡한 관계를 기억할 필요가 없습니다

방법 Pinia

1. pinia

yarn add pinia

를 설치합니다. 2. pinia

// src/stores/index.js
import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

//main.js
import pinia from './stores'

app.use(pinia)

를 만듭니다. Store

A Store(예: Pinia)는 개체이며, 상태 및 비즈니스 로직을 보유합니다. 이는 전역 상태를 저장한다는 의미입니다

이런 방식으로 state、getters、actions

1을 포함하여 상태를 관리할 스토어를 원하는 만큼 정의할 수 있습니다. 정의 스토어는

• DefineStore(),

• 을 사용하여 정의하고 첫 번째 매개변수

로 전달되는 고유한 이름이 필요합니다. 2. store 사용

작업 상태

상태 은 스토어의 핵심 부분이며, 스토어는 상태 관리를 구현하는 데 사용됩니다.

• 방법 1: 상태를 하나씩 직접 수정
• 방법 2: 여러 상태를 한 번에 수정
• 방법 3: 상태 교체
• 방법 4: 상태 재설정

Getters

1. Getters

Getters를 인식하고 정의합니다. Store:

• getters 속성을 사용할 수 있습니다.
• getters는 상태를 매개변수로 받아들이는 함수를 정의할 수 있습니다.

2. Getters에 액세스

• 방법 1: 현재 스토어의 Getters에 액세스

• 방법 2: 자신의 다른 Getters에 액세스

• 방법 3: 다른 상점의 Getters에 액세스

  getters: {
      // 1. 基本使用
      debouleCount(state) {
        return state.count * 2
      },
      // 2. 一个 getters 引入另外一个 getters
      useDebouleCount() {
        return this.debouleCount + 2
      },
      // 3. getter也支持返回一个函数
      getFriendById(state) {
        return function (id) {
          for (let i = 0; i 

Action을 이해하고 정의

Action은 메소드로 이해될 수 있습니다. 구성요소에서 , getter와 마찬가지로 전체 저장소 인스턴스의 모든 작업은 작업에서 이를 통해 액세스할 수 있습니다.

Action은 비동기 작업을 지원하므로 Wait를 사용할 수 있습니다.

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

프로그래밍 소개

를 방문하세요! !

위 내용은 Vue의 차세대 상태 관리 라이브러리인 Pinia에 대해 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!