서문

Vuex를 통해 구성 요소 간의 데이터 통신을 달성하는 방법에 대해 이야기했지만 Vue 프로젝트 개발 과정에서 또 다른 좋은 데이터 관리 도구 인 Pinia가 있습니다. Vuex에 비해 Pinia에서는 Vuex를 제거하여 발목 팔찌를 가져 와서 저장소로 저장할 수 있도록합니다! 억제되지 않은 방종 내부 ....

시작, 우선 오늘의 데모의 효과를 보자, 데모는 어렵지 않고 Pinia의 이해에 중점을 둡니다.

오늘의 새로운 친구인 피니아에 대해 알아보는 TodoList 간단한 데모를 통해 알아보세요!

프로젝트 초기화 vue Cli| Vite

오늘은 여전히 Vue 프로젝트이지만, 우리 모두는 vite가 Vue 팀에서 개발한 차세대 스캐폴딩이라는 것을 알고 있습니다. 그렇다면 Vite와 Vue Cli 스캐폴딩의 차이점은 무엇일까요?

• 간단히 말해서 Cli는 노인에 가깝고 Vue에서 태어 났으며 Vue 만 지원하며 콘텐츠가 풍부하고 프로젝트 개발을 위해 잘 고려되어 있으며 입에 밥을 먹이는 것에 가깝다는 것입니다.

• Vue 팀은 Vite를 Vue에 국한되지 않는 범용 빌드 도구로 만들기 위해 더 가볍고 컴팩트하며, ES6 브라우저 네이티브 ES6 모듈을 사용하는 개발 환경으로 코드를 브라우저에 직접 패키징하여 사용할 필요가 없는 Vite를 개발했습니다 . 따라서 패키징 과정에서 중복되는 코드 파싱 프로세스를 제거하여 프로젝트를 더 원활하고 빠르게 실행할 수 있습니다. 따라서 소규모 프로젝트에서는 Vite 스캐폴딩을 사용하는 것을 선호합니다.

Vite 프로젝트 초기화 방법의 경우, VueCli와의 차이점, 선택 방법에 대한 주요 소개는 다음과 같습니다. 아래에 튜토리얼을 게시할 테니 직접 플레이해 보세요!

이전 글

VueCli프로젝트 초기화

피니아 시작하기

1. 여기서는 node.js에서 제공하는 패키지 관리 도구를 통해 Pinia 종속 요소를 직접 다운로드하도록 선택합니다.

물론 yarn과 같은 패키지 관리 도구를 선택하여

2. 설치가 완료되면 모듈식 데이터 관리를 시작할 차례입니다.

할 일 데이터 관리 모듈을 빌드하기 위해 프로젝트의 스토어 디렉터리에 todo.js 파일을 만들었습니다.

js
// vue 3의 ref 함수와 Pinia의 defineStore 함수 가져오기
import { ref } from 'vue'
import { defineStore } from 'pinia'

// defineStore 함수로 "todo"라는 데이터 관리 모듈 정의하기
export const useTodoStore = defineStore("todo", () => {
 // ref 함수를 사용하여 처음에 객체 요소를 포함하는 반응형 데이터 변수 todos 생성하기
 const todos = ref([
 { txt: '인생은 기복이 전부가 아니다'}
 ])

 // 할일 배열에 새 객체 요소를 추가하는 addTodo라는 함수를 정의합니다.
 const addTodo = () => {
 todos.value.push({ txt: ' })
 }

 // 정의된 데이터 변수와 함수를 컴포넌트에서 사용할 수 있도록 반환하기
 return {
 todos,
 addTodo
 }
})

3. 반응형 데이터와 해당 메소드를 사용하면 구성 요소를 사용하여 작동할 수 있습니다!

버튼을 클릭하여 데이터를 표시하고 보여주기 위한 전용 구성 요소 파일인 src 디렉터리의 구성 요소 파일 아래에 TodoList.vue 구성 요소를 만듭니다.

js
// vue 3의 ref 함수와 Pinia의 defineStore 함수 가져오기
import { ref } from 'vue'
import { defineStore } from 'pinia'

// defineStore 함수로 "todo"라는 데이터 관리 모듈 정의하기
export const useTodoStore = defineStore("todo", () => {
 // ref 함수를 사용하여 처음에 객체 요소를 포함하는 반응형 데이터 변수 todos 생성하기
 const todos = ref([
 { txt: '인생은 기복이 전부가 아니다'}
 ])

 // 할일 배열에 새 객체 요소를 추가하는 addTodo라는 함수를 정의합니다.
 const addTodo = () => {
 todos.value.push({ txt: ' })
 }

 // 정의된 데이터 변수와 함수를 컴포넌트에서 사용할 수 있도록 반환하기
 return {
 todos,
 addTodo
 }
})

4. 컴포넌트는 결국 다른 컴포넌트에서 사용될 것이므로 App.vue에 사용하도록 등록할 컴포넌트를 소개합니다!

App.vue에서 TodoList 컴포넌트를 가져오고 TodoStore 데이터 관리 모듈을 사용하여 할 일 배열에서 반응형 데이터를 가져오고 addTodo 메서드를 사용하여 조작하면 프로젝트를 성공적으로 시작하고 결과를 확인할 수 있습니다!

xml
<template>
 <!-- TodoList라는 컴포넌트를 포함하고, 할 일의 배열을 todoStore에 전달하고, props를 통해 addTodo 메서드를 전달합니다.>
 <div>
 <TodoList 
 :todos="todoStore.todos" 
 :addTodo="todoStore.addTodo"
 />
 </div>
</template>

<script setup>
 
import TodoList from './components/TodoList.vue'
import { useTodoStore } from './store/todos.js'

// todoStore라는 데이터 관리 인스턴스 만들기
const todoStore = useTodoStore()

</script>

<style scoped>
/* 선택적 스타일, 여기에서 컴포넌트의 로컬 스타일을 추가할 수 있습니다.*/
</style>

요약

이 프로젝트에서는 데이터 상태 관리 리포지토리에 선택적 API를 사용할 수 있는데, 이는 Vuex로 작성한 작은 데모에 비해 Pinia가 훨씬 더 간단한 상태 관리 방법을 제공하기 때문입니다. 물론 상태, 게터, 액션 등 Pinia의 API를 조합해서 사용할 수도 있고, Pinia의 defineStore를 도입하는 것만으로도 여러 개의 스토어 인스턴스를 생성할 수 있어 비즈니스 컴포넌트 개발에 적합합니다. 또한 가장 많이 사용되는 후크 프로그래밍을 사용하여 프로그래밍 스타일이 더 현대적입니다.

물론 최종 분석에서 두 가지가 개발 도구의 비즈니스 프로세스 일 뿐이며 온라인 최종 프로젝트 패키징은 여전히 순수한 HTML & CSS & JS이기 때문에 자신의 비즈니스 요구에 따라 Vuex와 pinia를 선택해야하는 동지입니다.

오늘의 내용을 마무리하며 세 가지 요점을 정리해 보겠습니다.

1. 피니아 스토어에 저장된 데이터.

   • 프런트엔드에서는 store 디렉터리에 todo.js 파일을 생성하고 defineStore 함수를 사용하여 데이터 관리 함수인 useTodoStore를 가져와서 상태 관리를 위해 Pinia를 사용합니다.
   • useTodoStore를 호출하여 할 일 등의 상태를 가져옵니다.

2. 데이터를 요청하는 컴포넌트.

   • import { useTodoStore } from './store/todo.js'; 통해 Vue 컴포넌트에서 useTodoStore 함수를 도입할 수 있습니다.
   • 할 일 등의 데이터를 useTodoStore를 통해 가져와서 컴포넌트에 전달합니다.

3. 피니아의 장점.

   • Pinia는 defineStore 함수를 사용하여 스토어를 쉽게 생성할 수 있도록 하여 상태를 보다 간단하게 관리할 수 있는 방법을 제공합니다.
   • 최신 후크 프로그래밍 스타일을 사용합니다(예: useTodoStore를 통해 상태 가져오기).
   • 데이터와 UI 구성 요소를 분리하면 구성 요소가 더 깔끔하고 유지 관리가 쉬워집니다.

이것으로 오늘의 글은 여기까지입니다.

만들기가 쉽지 않으니 이 글이 도움이 되었다고 생각되면 좋아요를 눌러주세요!

자세히 읽어보세요.

: Gitee