https://github.com/nazarepiedady/pinia-docs-pt
Documentação da Pinia em Português. 🇦🇴 🇧🇷 🇵🇹
https://github.com/nazarepiedady/pinia-docs-pt
nuxt nuxt3 nuxtjs pinia pinia-vuejs pt pt-br state-management vue vuejs vuejs2 vuejs3 vuex vuex4
Last synced: about 2 months ago
JSON representation
Documentação da Pinia em Português. 🇦🇴 🇧🇷 🇵🇹
- Host: GitHub
- URL: https://github.com/nazarepiedady/pinia-docs-pt
- Owner: nazarepiedady
- License: mit
- Created: 2022-08-26T23:11:05.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-07T10:03:18.000Z (3 months ago)
- Last Synced: 2025-04-08T18:39:40.899Z (3 months ago)
- Topics: nuxt, nuxt3, nuxtjs, pinia, pinia-vuejs, pt, pt-br, state-management, vue, vuejs, vuejs2, vuejs3, vuex, vuex4
- Language: Vue
- Homepage: https://pinia-docs-pt.netlify.app
- Size: 761 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pinia
> Intuitiva, memória flexível e segurança de tipo para Vue.js
- 💡 Intuitiva
- 🔑 Segurança de Tipo
- ⚙️ Suporte de Ferramenta de Programação
- 🔌 Extensível
- 🏗 Modular de Propósito
- 📦 Extremamente Leve
A Pinia funciona com ambas Vue 2 e Vue 3.
Pinia é a pronúncia em Inglês mais parecida com a palavra _pineapple_ em Espanhol: _pinã_ que significa ananás em Português. Um ananás é na realidade um grupo de flores individuais que se juntam para criar uma fruta diversificada. Semelhante as memórias, cada uma é nascida individualmente, mas são todas conectadas no final. É também uma deliciosa fruta tropical nativa da América do Sul.
## 👉 [Demonstração com a Vue 3 na StackBlitz](https://stackblitz.com/github/piniajs/example-vue-3-vite)
## 👉 [ Demonstração com a Nuxt 3 na StackBlitz](https://stackblitz.com/github/piniajs/example-nuxt-3)
## Ajuda-me a continuar a trabalhar neste projeto 💚
- [Torna-te um Patrocinador na GitHub](https://github.com/sponsors/posva)
- [Doação de uma vez através da PayPal](https://paypal.me/posva)
Patrocinadores de Ouro
Patrocinadores de Prata
Patrocinadores de Bronze
---
## Questões Feitas com Frequências
Algumas notas sobre o projeto e possíveis questões:
- **Questão**: _A Pinia é a sucessora da Vuex?_
- **Resposta**: [Sim](https://vuejs.org/guide/scaling-up/state-management.html#pinia)
- **Questão**: _E os módulos dinâmicos?_
- **Resposta**: Os módulos dinâmicos não estão em segurança de tipo, assim no lugar destes [permitimos a criação de memórias diferentes](https://pinia.vuejs.org/cookbook/composing-stores.html) que podem ser importadas em qualquer parte.
## Instalação
```bash
# ou pnpm ou yarn
npm install pinia
```
Se estiveres a usar uma versão da Vue abaixo da 2.7, certifica-te de instalar o `@vue/composition-api` mas recente:
```bash
npm install pinia @vue/composition-api
```
## Uso
### Instalar a extensão
Crie uma pinia (a memória raiz) e passe-a para aplicação:
```js
// Vue 3
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
```
```js
// Vue 2
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
el: '#app',
// outras opções...
// ...
// nota que a mesma instância de `pinia` pode ser usada
// através de várias aplicações de Vue na mesma página.
pinia,
})
```
### Criar uma Memória (`store`)
Tu podes criar quantas memórias quiseres, e cada uma deve existir em ficheiros diferentes:
```ts
import { defineStore } from 'pinia'
// `main` é o nome da memória. É único através da tua aplicação
// e aparecerá nas ferramentas de programação
export const useMainStore = defineStore('main', {
// uma função que retorna um estado novo
state: () => ({
counter: 0,
name: 'Eduardo',
}),
// recuperadores opcionais
getters: {
// os recuperadores recebem o estado como primeiro argumento
doubleCounter: (state) => state.counter * 2,
// usar recuperadores dentro doutros recuperadores
doubleCounterPlusOne(): number {
return this.doubleCounter + 1
},
},
// ações opcionais
actions: {
reset() {
// `this` é a instância da memória
this.counter = 0
},
},
})
```
`defineStore` retorna uma função que precisa de ser chamada para receber o acesso à memória:
```ts
import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'
export default defineComponent({
setup() {
const main = useMainStore()
// extrair propriedades específicas da memórias
const { counter, doubleCounter } = storeToRefs(main)
return {
// dar acesso à memória inteira no modelo de marcação
main,
// dar acesso apenas ao estado ou recuperador específico
counter,
doubleCounter,
}
},
})
```
## Documentação
Para saberes mais sobre a Pinia, consulta a [sua documentação](https://pinia.vuejs.org).
## Licença
[MIT](http://opensource.org/licenses/MIT)