Nuxt.js ​

Використовувати Pinia з Nuxt легше, оскільки Nuxt піклується про багато речей, коли йдеться про відтворення на стороні сервера. Наприклад, вам не потрібно піклуватися ні про серіалізацію, ні про атаки XSS. Pinia підтримує Nuxt Bridge і Nuxt 3. Про підтримку Nuxt 2 дивіться нижче.

Встановлення ​

yarn add pinia @pinia/nuxt
# або з npm
npm install pinia @pinia/nuxt

yarn add pinia @pinia/nuxt
# або з npm
npm install pinia @pinia/nuxt

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

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

Ми надаємо module , щоб обробляти все для вас, вам потрібно лише додати його до modules у вашому файлі nuxt.config.js:

// 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():

<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>

Автоматичні імпортування ​

За промовчанням @pinia/nuxt надає кілька автоматичних імпортів:

• usePinia(), який схожий на getActivePinia(), але краще працює з Nuxt. Ви можете додати автоматичний імпорт, щоб полегшити ваше життя
• defineStore() для оголошення сховищ
• storeToRefs() коли вам потрібно отримати окремі референції з магазину
• acceptHMRUpdate() для гарячої заміни модулів

Він також автоматично імпортує усі сховища, визначені у вашій папці stores. Однак він не шукає вкладені сховища. Ви можете налаштувати цю поведінку, встановивши опцію 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 без моста ​

Pinia підтримує Nuxt 2 до @pinia/nuxt v0.2.1. Переконайтеся, що також встановлено @nuxtjs/composition-api разом із pinia:

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
# або з npm
npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
# або з npm
npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

Ми надаємо module, щоб обробляти все для вас, вам потрібно лише додати його до buildModules у вашому файлі nuxt.config.js:

// 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 ​

Якщо ви використовуєте Nuxt 2 (@pinia/nuxt < 0.3.0) з TypeScript або маєте jsconfig.json, вам треба також додати типи для context.pinia:

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

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

Це також забезпечить автозавершення для вас 😉 .

Використання Pinia разом з Vuex ​

Рекомендується уникати використання Pinia та Vuex водночас, але якщо вам потрібно використовувати обидва, вам потрібно сказати pinia не вимикати його:

// 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 }],
  ],
  // ... інші налаштування
}