Nuxt 3와 피니아

Integrate Pinia as your state management library for your Nuxt 3 application.

뷰엑스 -> 피니아

Vue를 직접 만든 Evan You는 "Pinia는 사실상 Vuex 5입니다! 이 시점에서 실제로 이름/브랜딩 문제입니다."라고 말했습니다.

당분간은 Vuex보다 Pinia 콘텐츠를 찾는 것이 가장 좋을 것입니다.



Pinia > Vuex에 대해 더 잘 이해하려면 이에 관한 VueJS의 공식post을 읽는 것이 좋습니다.

Nuxt 3에 Pinia 설치하기

Pinia는 거의 Nuxt 3에 대한 최고 수준의 지원을 제공합니다. 두 개의 패키지를 설치해야 합니다.

yarn add pinia
yarn add @pinia/nuxt

nuxt.config 파일에 Pinia 추가

buildModules 배열에 '@pinia/nuxt'를 추가해야 합니다.

// nuxt.config.js
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: ['@pinia/nuxt'],
})

Pinia 매장 구축

이제 명명된 저장소를 구축합니다. 내 사용 사례의 경우 필터와 관련된 상태를 관리해야 했기 때문에 내 상점의 골격은 다음과 같습니다.

// store/filters.js
import { defineStore } from 'pinia'

export const useFiltersStore = defineStore({
  id: 'filter-store',
  state: () => {
    return {
      filtersList: ['youtube', 'twitch'],
    }
  },
  actions: {},
  getters: {
    filtersList: state => state.filtersList,
  },
})

이것은 단지 귀하의 상점의 일반적인 구조를 보여주는 것입니다. 핵심은 defineStore 이며 id 를 포함해야 합니다. 이 경우에는 'filter-store'를 id로 사용하고 있지만 원하는 대로 지정할 수 있습니다.

Pinia를 올바르게 사용하는 방법을 더 잘 이해하려면 PiniaDocs를 읽어보십시오.

Vue 구성 요소에서 Pinia 가져오기

저희 매장이 있는 상태에서 사용하고 싶은 구성 요소로 가져오기만 하면 됩니다!

<template>
  <div>
    {{ filtersList }}
  </div>
</template>

// components/FilterMenu.vue
<script>
import { useFiltersStore } from '~/store/filters'

export default defineComponent({
  setup() {
    const filtersStore = useFiltersStore()
    const filtersList = filtersStore.filtersList

    return { filtersList }
  },
})
</script>