Usar pinia no projeto vue3

1. vuex 4
2. pinia abacaxi pequeno

vuex é consistente com o vue2 anterior

1.import { createStore } from 'vuex' 引入文件不同

vue3组件setup写法vuex提供了hook
//组件中操作store
import { useStore } from 'vuex'
//提交mutations 进行修改
store.commit('increment'),
//dispatch 触发action 同步或者异步提交mutations
store.dispatch('asyncIncrement')

feijões

pinia como RTK

pinia otimização vuex.

website oficial

https://pinia.vuejs.org/zh/

中文文档
https://pinia.web3doc.top/

Biblioteca de gerenciamento de estado Vue.js

Segurança de tipos, extensibilidade e design modular. Até faz você esquecer que está usando uma biblioteca estadual.

vantagem:

Introdução

Pinia  foi originalmente redesenhado por volta de novembro de 2019 para usar  a API de composição  . Desde então, os princípios originais permanecem os mesmos, mas Pinia funciona tanto para Vue 2 quanto para Vue 3 e não exige que você use a API de composição. Além da instalação e do SSR, a API é a mesma para ambos, e os documentos visam o Vue 3, com notas sobre o Vue 2 quando necessário, para que os usuários do Vue 2 e do Vue 3 possam ler!

Por que usar pinia

Pinia é um repositório para Vue que permite compartilhar o estado entre componentes/páginas.

Se você estiver familiarizado com a API de composição, talvez pense que já conseguiria fazer isso com um simples export const state = reactive({})

vantagem

• suporte para ferramentas de desenvolvimento
  • Linha do tempo para rastrear ações, mutações
  • As lojas aparecem nos componentes que as utilizam
  • viagem no tempo e depuração mais fácil
• Substituição do Módulo Quente
  • Modifique sua loja sem recarregar a página
  • Mantenha qualquer estado existente durante o desenvolvimento
• Plug-ins: estenda a funcionalidade do Pinia com plug-ins
• Suporte adequado a TypeScript ou  preenchimento automático para usuários JS
• Suporte de renderização do lado do servidor

pinia cancela a operação de mutação, e o estado pode ser atualizado de forma síncrona ou assíncrona diretamente através da ação. Ação

Os três núcleos comumente usados ​​em pinia:

1. estado define a fonte de dados
2. ação é usada para modificar o estado
3. Getters são calculados como propriedades computadas

Usar pinia no projeto

Instalar

1. cnpm i --save-dev pinia
2. "pinia": "^2.0.34",

1.创建pinia
index.ts
//创建pinia
import { createPinia } from "pinia";

//创建pinia对象
const pinia = createPinia();

export default pinia;

2.将pinia关联到vue项目

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
//引入pinia
import pinia from "@/pinia/index";
//将路由关联到vue3 项目
createApp(App).use(pinia).mount("#app");

3.使用pinia 内置api 创建模块化状态管理
创建store使用api defineStore
参数1：id唯一标识 user
参数2：为当前模块的基本配置

参数2函数式写法
export const useCounterStore = defineStore('counter', () => {
//内部类似setUp写法
const count = ref(0)
function increment() {
count.value++
}

return { count, increment }
})

Criar uma loja

//使用pinia 创建一个user 模块进行状态管理
import { defineStore } from "pinia";

//创建store
let userStore = defineStore("user", {
state() {
return {
//定义数据源
token: "",
};
},
//执行修改状态
actions: {
saveToken(args: string) {
this.token = args;
},
},
//属性计算
getters: {},
});

export default userStore;

Use o pinia na configuração do componente

<script setup lang="ts">
//引入对应的模块
import user from "@/pinia/module/userStore";
//执行获取store
let userStore = user();
</script>
<template>
<div>商铺综合收费--{
   
   { userStore.token }}</div>
</template>

//触发action修改state
userStore.saveToken("111")

Depurador de ferramentas de desenvolvimento de configuração do navegador

Os pacotes de ferramentas de desenvolvimento existentes são instalados diretamente na extensão do navegador.