Nuxt.js

Usar a Pinia com a Nuxt é mais fácil uma vez que a Nuxt cuida dum monte de coisas quando esta chega à interpretação do lado do servidor. Por exemplo, não precisamos preocupar-nos com a serialização nem com os ataques de XSS. A Pinia suporta a Nuxt Bridge e a Nuxt 3. Para suporte simples da Nuxt 2, consular abaixo.

Instalação

yarn add @pinia/nuxt # ou com a npm npm install @pinia/nuxt

DICA

Se usarmos a npm, podemos deparar-nos com um erro ERESOLVE unable to resolve dependency tree. Neste caso, adicionamos o seguinte ao nosso package.json:

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

Nós fornecemos um módulo para manipular tudo por nós, apenas precisamos adicioná-lo à modules no nosso ficheiro nuxt.config.js:

// nuxt.config.js export default defineNuxtConfig({  // ... outras opções  modules: [  // ...  '@pinia/nuxt',  ], })

E é isto, usamos a nossa memória conforme o habitual!

Esperando pelas Ações nas Páginas

Tal como acontece com a onServerPrefetch(), podemos chamar uma ação da memória dentro da asyncData(). Dada como useAsyncData() funciona, devemos certificar-nos de retornar um valor. Isto permitirá a Nuxt saltar consecutivamente a ação no lado do cliente e reutilizar o valor a partir do servidor:

<script setup> const store = useStore() // nós também poderíamos extrair os dados, // mas já estão presentes na memória await useAsyncData('user', () => store.fetchUser()) </script>

Se a nossa ação não resolver o valor, podemos adicionar qualquer valor que não for nulo:

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

DICA

Se quisermos usar uma memória fora da setup(), lembremos de passar o objeto da pinia à useStore(). Nós o adicionamos ao contexto, assim temos acesso à este na asyncData e na fetch():

import { useStore } from '~/stores/myStore'  export default {  asyncData({ $pinia }) {  const store = useStore($pinia)  }, }

Importações Automáticas

Por padrão, a @pinia/nuxt expõe algumas importações automáticas:

• A usePinia(), que é semelhante à getActivePinia() mas funciona melhor com a Nuxt. Nós podemos adicionar importações automáticas para facilitar a nossa vida
• A defineStore(), para definir as memórias
• A storeToRefs() quando precisamos extrair referências individuais a partir duma memória
• A acceptHMRUpdate() para a substituição de módulo instantânea

Esta também importa automaticamente todas as memórias definidas dentro da nossa pasta stores. Embora esta não procure pelas memórias encaixadas. Nós podemos personalizar este comportamento definindo a opção storesDir:

// nuxt.config.ts export default defineNuxtConfig({  // ... outras opções  modules: ['@pinia/nuxt'],  pinia: {  storesDir: ['./stores/**', './custom-folder/stores/**'],  }, })

Nota que as pastas são relativas à raiz do nosso projeto. Se mudarmos a opção srcDir, precisamos adaptar os caminhos em conformidade.

Nuxt 2 sem a Bridge

A Pinia suporta a Nuxt 2 até a versão 0.2.1 da @pinia/nuxt. Também devemos certificar-nos de instalar a @nuxtjs/composition-api ao lado da pinia:

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api # ou com o npm npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

Nós fornecemos um módulo para manipular tudo por nós, apenas precisamos adicioná-lo à buildModules no nosso ficheiro nuxt.config.js:

// nuxt.config.js export default {  // ... outras opções  buildModules: [  // Somente na Nuxt 2:  // https://composition-api.nuxtjs.org/getting-started/setup#quick-start  '@nuxtjs/composition-api/module',  '@pinia/nuxt',  ], }

TypeScript

Se usarmos a Nuxt 2 (@pinia/nuxt < 0.3.0) com a TypeScript, ou tivermos um jsconfig.json, também devemos adicionar os tipos a context.pinia:

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

Isto também garantirá que tenhamos a conclusão de código automática 😉 .

Usando a Pinia ao Lado da Vuex

É recomendado evitar usar ambas Pinia e Vuex mas se precisarmos usar ambas, precisamos dizer a pinia para a não desativar:

// nuxt.config.js export default {  buildModules: [  '@nuxtjs/composition-api/module',  ['@pinia/nuxt', { disableVuex: false }],  ],  // ... outras opções }