Nuxt.js

Использование Pinia с Nuxt проще, так как Nuxt заботится о многих аспектах рендеринга на стороне сервера. Например, вам не нужно беспокоиться о сериализации и XSS-атаках. Pinia поддерживает Nuxt Bridge и Nuxt 3. Для поддержки чистого Nuxt 2, см. ниже.

Установка

yarn add pinia @pinia/nuxt
# или с помощью npm
npm install pinia @pinia/nuxt

Совет

Если вы используете npm, возможно, вы столкнетесь с ошибкой ERESOLVE unable to resolve dependency tree. В этом случае добавьте следующее в ваш package.json:

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

Мы предоставляем модуль, который обрабатывает все для вас, вам нужно только добавить его в раздел modules в файле nuxt.config.js:

// nuxt.config.js
export default defineNuxtConfig({
  // ... другие параметры
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

И вот, используйте свое хранилище как обычно!

Ожидание выполнения действий на страницах

Как и с onServerPrefetch(), вы можете вызывать действие хранилища внутри asyncData(). Учитывая, как работает useAsyncData(), убедитесь, что возвращаете значение. Это позволит Nuxt пропустить выполнение действия на стороне клиента и повторно использовать значение с сервера.

<script setup>
const store = useStore()
// мы также могли бы извлечь данные, но они уже присутствуют в хранилище
await useAsyncData('user', () => store.fetchUser())
</script>

Если ваше действие не возвращает значение, вы можете добавить любое значение, не являющееся null или undefined:

<script setup>
const store = useStore()
await useAsyncData('user', () => store.fetchUser().then(() => true))
</script>

Совет

Если вы хотите использовать хранилище за пределами setup(), не забудьте передать объект pinia в useStore(). Мы добавили его в контекст, поэтому у вас есть к нему доступ в asyncData() и fetch():

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

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

Автоматические импорты

По умолчанию @pinia/nuxt предоставляет несколько автоматических импортов:

• usePinia(), похоже на getActivePinia(), но лучше работает с Nuxt. Вы можете добавить автоматические импорты, чтобы упростить свою жизнь:
• defineStore() для определения хранилищ
• storeToRefs()когда необходимо извлечь отдельные ref-ссылки из хранилища
• acceptHMRUpdate() для горячей замены модулей

Также автоматически импортируются все хранилища, определенные в вашей папке stores. Однако вложенные хранилища не ищутся. Вы можете настроить это поведение, установив параметр storesDirs:

// nuxt.config.ts
export default defineNuxtConfig({
  // ... другие параметры
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './custom-folder/stores/**'],
  },
})

Обратите внимание, что пути папок относительны к корню вашего проекта. Если вы измените параметр srcDir, вам также придется изменить пути папок.

Nuxt 2 без bridge

Pinia поддерживает Nuxt 2 до версии @pinia/nuxt v0.2.1. Также убедитесь, что вместе с pinia вы установили @nuxtjs/composition-api наряду с pinia.

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
# или при помощи
npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

Мы поставляем модуль, который будет выполнять все действия за вас, вам нужно только добавить его в 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',
  ],
}

TypeScript

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

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

Это также обеспечит автозаполнение 😉 .

Использование Pinia совместно с Vuex

Рекомендуется избегать совместного использования Pinia и Vuex, но если необходимо использовать и то, и другое, то нужно указать pinia, чтобы она не отключала Vuex:

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... другие параметры
}