Ferramenta de gestão do estado Pinia (implementação rápida)

1. A seguir está o entendimento do pinia (se você já conhece, basta pular para ver o código de implementação)

Pinia é um substituto para Vuex no ecossistema vue, uma nova biblioteca de gerenciamento de estado vue. Depois que o Vue3 se tornou a versão oficial, o projeto fortemente recomendado por You Yuxi é Pinia.
Vamos primeiro dar uma olhada no que o Pinia é melhor que o Vuex, ou seja, as cinco principais vantagens do Pinia.

Ele pode suportar muito bem Vue2 e Vue3, ou seja, projetos antigos também podem usar Pinia.
Abandone a operação de Mutações, apenas estado, getters e ações. Isso simplifica muito o uso de bibliotecas de gerenciamento de estado, tornando a escrita de código mais fácil e intuitiva.
Não há necessidade de módulos aninhados e está em conformidade com a API de composição do Vue3 para tornar o código mais simples.
Suporte completo a TypeScript. Uma grande vantagem da versão Vue3 é o suporte para TypeScript, então Pinia também obteve suporte completo. Se você está familiarizado com o Vuex, deve saber que o suporte de sintaxe do Vuex para TS não é completo (é frequentemente reclamado).
O código é mais conciso e pode alcançar uma boa segmentação automática de código. Na era do Vue2, escrever código requer rolar para frente e para trás na tela para encontrar variáveis, o que é muito problemático.A API de composição do Vue3 resolve perfeitamente esse problema. A segmentação automática de código pode ser realizada, e pinia também herda essa vantagem.
Se você disser que esses cinco pontos são um pouco demais, não consigo me lembrar deles. Pode-se resumir brevemente que as vantagens do Pinia são sintaxe mais concisa, suporte perfeito para a API de composição do Vue3 e suporte perfeito para TypesCcript. Essas vantagens e a forte recomendação de You Yuxi. Pessoalmente, acho que Pinia substituirá completamente o Vuex em breve e se tornará a biblioteca de gerenciamento de estado mais adequada para o Vue3.

1. Primeiro, certifique-se de ter instalado o Pinia em seu projeto:

npm install pinia

 2. Em seguida, crie um store.jsarquivo chamado para definir e exportar a instância da Pinia Store:

import { createPinia } from 'pinia';

const store = createPinia();

export default store;

3. Em seguida, introduza Pinia no componente que precisa usar o estado e use a instância Store criada:

<template>
  <div>
    <h1>Count: {
   
   { count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'pinia'; // 导入 useStore

export default defineComponent({
  setup() {
    const store = useStore(); // 使用 useStore 获取 Store 实例

    const increment = () => {
      store.count++; // 更新状态：自增 count
    };

    const decrement = () => {
      store.count--; // 更新状态：自减 count
    };

    return {
      count: store.count, // 访问状态：获取当前的 count 值
      increment,
      decrement,
    };
  },
});
</script>

4. Por fim, instale o Pinia no componente raiz e forneça a instância Store para o aplicativo:

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store); // 安装 Pinia 并提供 Store 实例
app.mount('#app');

5. Resumo:

Isso completa um exemplo simples de gerenciamento do estado de Pinia. Neste exemplo, o useStoreestado pode ser acessado e atualizado no componente definindo uma instância Store e usando a função no componente para obter essa instância.

Deve-se notar que em projetos reais, diferentes instâncias de Store podem ser criadas de acordo com os requisitos e divididas em vários módulos para gerenciar diferentes estados. Pinia também oferece outras funções, como Actions, Getters e plug-ins, etc., que podem ser mais exploradas e utilizadas de acordo com a necessidade do projeto.

Perceber! : A diferença entre vuex e pinia, pinia é um armazém de gerenciamento de estado leve, abandonando a operação de mutions,
pinia mais leve é ​​​​adequado para projetos pequenos, ou em linha com baixa complexidade, ou o estado dos dados não é caótico, não é complicado, então use pinia Não tem problema,
se for um projeto de grande porte, ou a complexidade for alta, a lógica e o estado dos dados são mais complicados, é melhor usar o vuex, que é mais resistente à pressão e rico em estado.