Pinia와 Vuex 비교

배경.

지금까지 Vue의 상태 관리에 대해 말하자면 Vuex겠지
Vue3이 나타나면 Vue3의 강력한compositionapi의 영향을 받는다
Vue의 엔지니어들은 Vuex를 팩스로 보내서 좋은 상태 관리 도구Pinia를 만들었다.
Pinia는 Vuex의 Redux 사고에 비해 매우 가벼워져 이해하기 쉽다.
지금은 베어 가문의 일원이 되어 베어3을 사용한 토대에서 공식적으로 추천합니다.

절차.

나는 프로그램이 그렇게 이상하지 않다고 생각한다.
저는 개인적으로 pinia의api는 신의 등급이라고 생각합니다. 정말 간단하고 쓰기 좋습니다.
자세한 내용은 pinia 문서에서 각 appi를 확인하세요.

Vuex

Vuex는 역시 Redux의 생각을 가지고 있다. 나는 이 절차가 가장 적다고 생각한다.

장서 설치

npm install vuex@next --save
# or with yarn
yarn add vuex@next --save

제작 스토어.보통 src 아래에서 store 폴더를 만들어서 관리합니다.

src/store/vuex.ts

import {createStore} from 'vuex'
const useStore = createStore({
  state() {
    return { 
         name: '原神',
         version: '2.6',
	 gacha: 0,
      }
  },
  mutations: {
    addOne(state) {
      state.gacha++
    },
    addTen(state) {
      state.gacha = +10
    }
  }
})

프로젝트 상태 관리

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {useStore} from './store'
createApp(App).use(store).mount('#app')

4. 액세스
src/view/index.vue

<template>
  <h3>{{name}}</h3>
  <h3>{{version}}</h3>
  <h3>{{gacha}}</h3>
  <button @click="GachaOne">単発</button>
  <button @click="GachaTen">10連</button>
</template>
<script>
  import { computed } from 'vue'
  const store = useStore()
  export default defineComponent {
    name: 'Index',
    setup () {
      return {
        name: computed(() => store.name),
	version: computed(() => store.version),
	gacha: computed(() => store.gacha),
      }
    },
    GachaOne () {
      this.$store.commit('addOne')
    },
    GachaTen () {
      this.$store.commit('addTen')
    }
  }
</script>

Pinia

장서 설치

yarn add pinia@next
# or with npm
npm install pinia@next

프로젝트 상태 관리

main.ts

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

createApp(App).use(createPinia()).mount("#app");

제작 스토어.보통 src 아래에서 store 폴더를 만들어서 관리합니다.

src/store/pinia.ts

import { defineStore } from 'pinia'

export const gameStore = defineStore({
// id は必須+唯一です、管理しやすいためです
  id: 'game',
  state: () => ({
    name: '原神',
    version: '2.6',
    gacha: 0,
  }),
  getters: {
     //filterとか
  },
  actions: {
  　　　　　//値をsetするとか
       ...
  }
})

4. 액세스
src/view/index.vue

<template>
  <h3>{{game.name}}</h3>
  <h3>{{game.version}}</h3>
  <h3>{{game.gacha}}</h3>
  <button @click="pinia.gacha++">単発</button>
  <button @click="pinia.gacha=+10">10連</button>
</template>
<script setup>
  import { gameStore } from '../../store/pinia'
  const game = gameStore()
</script>

총결산

Pinia
Vuex
간단히
좀 복잡해요.
API($patch)로 mutation 없음
mutation으로 데이터 처리
액션 구속 없음
액션 제한
Comosition Api와 잘 어울림(TS)
Comosition Api와 어울리지 않음(TS)
입력하지 말고 API 사용
삽입해야 함
작은 프로젝트, 중간 규모
큰 프로젝트 수준
여러 가지 정보를 정리해보니 피니아는 항상 Vuex5와 합병된 것이 아니라고 생각하기 때문에 앞으로 피니아를 눌러도 괜찮다.
!
초보자 수준일 수도 있으니 지적해 주세요.