Nuxt.js

Nuxt.js와 피니아를 함께 사용하는 것은 Nuxt가 SSR과 관련하여 많은 것을 처리하기 때문에 더 쉽습니다. 예를 들어 직렬화나 XSS 공격에 신경 쓸 필요가 없습니다. 피니아는 Nuxt Bridge 및 Nuxt 3를 지원합니다. Nuxt 2 지원은 아래를 참조합시다.

설치

bash

yarn add pinia @pinia/nuxt
# or with npm
npm install pinia @pinia/nuxt

yarn add pinia @pinia/nuxt
# or with npm
npm install pinia @pinia/nuxt

TIP

npm을 사용하는 경우, 종속성 트리 오류를 해결할 수 없는 ERESOLVE 가 발생할 수 있습니다. 이 경우 package.json에 다음을 추가합니다:

"overrides": { 
  "vue": "latest"
}

"overrides": { 
  "vue": "latest"
}

모든 것을 처리할 수 있는 모듈을 제공하므로, nuxt.config.js 파일의 modules에 추가하기만 하면 됩니다:

// nuxt.config.js
export default defineNuxtConfig({
  // ... 다른 옵션들
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

// nuxt.config.js
export default defineNuxtConfig({
  // ... 다른 옵션들
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

이게 전부입니다, 평소처럼 스토어를 사용하세요!

`setup()` 외부에서 스토어 사용

setup() 외부에서 스토어를 사용하려면, pinia 객체를 useStore()에 전달하는 것을 잊지 마십시오. asyncData() 및 fetch()에서 접근할 수 있도록 컨텍스트에 추가되어 있습니다.

import { useStore } from '~/stores/myStore'

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}

import { useStore } from '~/stores/myStore'

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}

onServerPrefetch()와 마찬가지로 asyncData() 내에서 저장 작업을 호출하려는 경우 특별한 작업을 수행할 필요가 없습니다:

vue

<script setup>
const store = useStore()
const { data } = await useAsyncData('user', () => store.fetchUser())
</script>

<script setup>
const store = useStore()
const { data } = await useAsyncData('user', () => store.fetchUser())
</script>

오토 임포트 (import)

기본적으로 @pinia/nuxt는 몇몇 자동 import를 제공합니다:

usePinia(), 이것은 getActivePinia()와 유사하지만 Nuxt와 더 잘 동작합니다. 생활을 더 편리하게 하기 위해 자동 import를 추가할 수 있습니다:
스토어를 정의하기 위한 defineStore()
스토어에서 개별 refs를 추출할 필요가 있을 때 storeToRefs()
핫 모듈 교체를 위한 acceptHMRUpdate()

또한 자동으로 stores 폴더 내에 정의된 모든 스토어를 import합니다. 그러나 중첩된 스토어는 찾지 않습니다. storesDirs 옵션을 설정하여 이 행동을 사용자 정의 할 수 있습니다:

// nuxt.config.ts
export default defineNuxtConfig({
  // ... 다른 옵션들
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './custom-folder/stores/**'],
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  // ... 다른 옵션들
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './custom-folder/stores/**'],
  },
})

폴더는 프로젝트의 루트에 상대적입니다. srcDir 옵션을 변경한다면, 경로를 그에 맞게 조정해야 합니다.

Nuxt 2 without bridge

피니아는 @pinia/nuxt v0.2.1부터 Nuxt 2를 지원합니다. pinia와 더불어 @nuxtjs/composition-api도 설치해야 합니다:

bash

yarn add pinia @pinia/[email protected] @nuxtjs/composition-api
# 또는 npm으로
npm install pinia @pinia/[email protected] @nuxtjs/composition-api

yarn add pinia @pinia/[email protected] @nuxtjs/composition-api
# 또는 npm으로
npm install pinia @pinia/[email protected] @nuxtjs/composition-api

모든 것을 처리할 수 있는 모듈을 제공하므로, nuxt.config.js 파일의 buildModules에 추가하기만 하면 됩니다:

// nuxt.config.js
export default {
  // ... 다른 옵션들
  buildModules: [
    // Nuxt 2 에서만:
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

// nuxt.config.js
export default {
  // ... 다른 옵션들
  buildModules: [
    // Nuxt 2 에서만:
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

TypeScript

TypeScript와 함께 Nuxt2(@pinia/nuxt < 0.3.0)를 사용하거나 jsconfig.json이 있는 경우, context.pinia에 대한 유형을 추가해야 합니다:

json

{
  "types": [
    // ...
    "@pinia/nuxt"
  ]
}

{
  "types": [
    // ...
    "@pinia/nuxt"
  ]
}

이렇게 하면 자동 완성 기능이 보장됩니다 😉 .

Vuex와 함께 피니아 사용

피니아와 Vuex를 함께 사용하지 않는 것이 좋지만 둘 다 사용해야 하는 경우, 피니아가 Vuex를 비활성화하지 않도록 알려야 합니다:

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... 다른 옵션들
}

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... 다른 옵션들
}

Nuxt.js ​

설치 ​

setup() 외부에서 스토어 사용 ​

오토 임포트 (import) ​

Nuxt 2 without bridge ​

TypeScript ​

Vuex와 함께 피니아 사용 ​