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 }],
],
// ... другие параметры
}