Uso do Pinia, uma ferramenta de gerenciamento de estado global vue

Deixe-me saber algumas histórias sobre Pinia primeiro. Contá-las ao entrevistador na entrevista é um plus, e esta é a motivação para eu continuar aprendendo.

1. Por que se chama Pinia?

A explicação no site oficial é abacaxi em espanhol , que significa "abacaxi" A flor do abacaxi é um grupo de flores independentes que se combinam para formar um fruto múltiplo. Semelhante às Lojas, cada uma nasce independentemente e, eventualmente, todas se relacionam entre si. Ele (abacaxi) também é uma deliciosa fruta tropical nativa da América do Sul.

2. Qual é a função de Pinia?

Mesma função que vuex, usada para compartilhar dados globalmente. Na verdade, Pinia se originou de uma atualização do vuex, um experimento conduzido por Pinia por volta de novembro de 2019, cujo objetivo era projetar uma biblioteca de gerenciamento de estado vue com uma API combinada, o que significa que o código vue3 pode ser escrito em vuex. Combinando a maioria das funções do vuex 5, decidiu-se substituir o vuex como uma nova solução recomendada. Ou seja, Pinia é a versão vuex5.

3. Instale, digite no terminal do projeto:

npm install pinia

4. configuração do main.js

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

5.stores warehouse, crie uma pasta stores no diretório src, que armazena as operações de gerenciamento do warehouse

6. O warehouse counter.js, porque a função que implementei é somar números, então dei o nome de counter:

//这里就使用vue3的写法，虽然pinia也可以像写vuex一样写state、actions、mutations等等，但pinia主要还是面向vue3

import { defineStore } from 'pinia' //引入
import { ref, reactive } from "vue" //引入组合式api
import { useRouter } from "vue-router"

//可以对 `defineStore()` 的返回值进行任意命名，但最好使用 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
//defineStore()的第一个参数一定要是项目中唯一的名称
export const useCounter = defineStore('counter', () => {
    let num = ref(0) //这个num就是此仓库中的响应式数据

    const addNum = () =>{ //addNum就是此仓库的方法
        num.value = num.value+1;
    }

    return { num,addNum } //一定要return！不然其他地方用不到
})

7. Use o depósito de balcão na página sobre:

<script setup>
import {useCounter} from "@/stores/counter.js" //引入useCounter仓库
//接收return的返回值，里面就包含num变量和addNum方法，num展示到页面，点击按钮调用addNum方法
const store = useCounter();    
</script>

<template>
  <div class="about">
    <h1>{
   
   {store.num}}</h1>
    <button @click="store.addNum">num++</button>
  </div>
</template>

<style>
</style>

8. Efeito: Clique no botão e o número na página mudará de acordo, sucesso

Pinia é realmente muito mais conveniente do que vuex. Não precisa ser restringido por ações e mutações, e pode ler e gravar dados diretamente no warehouse. Sinto que a relação entre Pinia e Vuex é como a relação entre Vue3 e Vue2.

Rede oficial da Pinia: Pinia | A loja intuitiva para Vue.js

Uso do Pinia, uma ferramenta de gerenciamento de estado global vue

Acho que você gosta