Skip to content

Latest commit

 

History

History
229 lines (182 loc) · 7.72 KB

README.md

File metadata and controls

229 lines (182 loc) · 7.72 KB

Logótipo da Pinia


pacote da npm estado da construção cobertura de código


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.

Ajuda-me a continuar a trabalhar neste projeto 💚

Patrocinadores de Ouro

VueJobs

Patrocinadores de Prata

VueMastery Prefect

Patrocinadores de Bronze

Stanislas Ormières Antony Konstantinidis Storyblok NuxtJS


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
  • Questão: E os módulos dinâmicos?

Instalação

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

npm install pinia @vue/composition-api

Uso

Instalar a extensão

Crie uma pinia (a memória raiz) e passe-a para aplicação:

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

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:

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.

Licença

MIT