Pinia es una biblioteca de gestión de estado para Vue.js 3 que es muy sencilla e intuitiva de usar.
Las ventajas de Pinia son aproximadamente las siguientes.
Compatibilidad con TypeScript : Pinia está escrita en TypeScript y ofrece compatibilidad total con tipos, lo que hace que escribir código con seguridad de escritura sea más fácil e intuitivo.
Simple y fácil de usar : El diseño de Pinia es muy simple, con un solo concepto de Tienda, lo que lo hace más fácil de usar que Vuex.
Mejor rendimiento : Pinia utiliza las nuevas características de Vue 3, como la API reactiva y la nueva forma de crear instancias de componentes, lo que lo hace más eficaz que Vuex.
Modularidad : el diseño modular de Pinia es muy bueno y los módulos funcionales se pueden dividir fácilmente en instancias de Tienda independientes.
Mejor soporte para pruebas : Pinia tiene un buen soporte para pruebas, lo que facilita la escritura de código de prueba y no requiere demasiado código simulado.
1. Instalar y utilizar Pinia
- 1.1 Utilice npm o hilo para instalar Pinia:
npm install pinia
# or with yarn
yarn add pinia
- 1.2 Registre Pinia en el archivo de entrada main.js
import {
createPinia } from 'pinia'
app.use(createPinia())
- 1.3 Cree una nueva tienda/index.js en el directorio src
import {
defineStore } from 'pinia'
// 第一个参数 storeId 是仓库的key 必须独一无二
export const useStore = defineStore('storeId', {
state: () => {
return {
count: 0,
name: "张三"
}
},
getters:{
},
actions:{
}
})
- 1.4 Uso de datos de estado de Pinia en componentes
<template>
<div>
<h1>组件</h1>
{
{ count }}
</div>
</template>
<script setup>
import {
useStore } from '@/store/index'
const store = useStore();
const {
name } = store;
</script>
-
1.5 Componente modifica datos en Pinia
Pinia en sí puede modificar directamente los datos de estado sin pasar por mutaciones como vuex. Sin embargo, la deconstrucción de const {name} = store; escrita arriba no es posible, por lo que es necesario cambiar el método de deconstrucción.
<template>
<div>
<h1>组件</h1>
{
{
count }}
</div>
</template>
<script setup>
import {
storeToRefs } from 'pinia'
import {
useStore } from '@/store/index'
const store = useStore();
// 第一种、直接修改
store.count++
// 第二种、调用$patch方法修改
countStore.$patch({
count: store.count+2
})
// 第三种
// pinia提供了 一个 storeToRefs 方法 类似于 vue3中 toRefs
const {
count } = storeToRefs(store);
count.value = 1000;
</script>
- 1.6 Uso de captadores
Los captadores son casi similares a los captadores en vuex. Los nuevos valores se calculan en función del estado existente y se almacenan en caché en función de las dependencias. Las dependencias no se volverán a calcular si se usan varias veces.
import {
defineStore } from 'pinia'
// 第一个参数 storeId 是仓库的key 必须独一无二
export const useStore = defineStore('storeId', {
state: () => {
return {
num: 10,
name: "张三"
}
},
getters:{
// 1 箭头函数写法 参数是state
doubleNum: state => {
return state.num * 2
},
// 2 对象方法写法
tribleNum(state){
return state.num*3
}
},
actions:{
}
})
Usando captadores en componentes
<template>
<div>
{
{ doubleNum }}
{
{ tribleNum }}
{
{ tribleNum }}
<h1>组件</h1>
{
{ num }}
</div>
</template>
<script setup>
import {
storeToRefs } from 'pinia'
import {
useStore } from '../store/index'
const store = useStore();
//直接使用
console.log(store.doubleNum )
//解构
const {
num, doubleNum, tribleNum} = storeToRefs(store);
</script>
- 1.7 Uso de acciones
Las acciones son relativamente simples: escribir métodos. Por ejemplo, podemos establecer un cierto valor en el estado += y pasar parámetros.
import {
defineStore } from 'pinia'
// 第一个参数 storeId 是仓库的key 必须独一无二
export const useStore = defineStore('storeId', {
state: () => {
return {
num: 10,
name: "张三"
}
},
getters:{
// 1 箭头函数写法 参数是state
doubleNum: state => {
return state.num * 2
},
// 2 对象方法写法
tribleNum(state){
return state.num*3
}
},
actions:{
addNum(n) {
// 直接通过this 千万不要写箭头函数
this.num += n
}
}
})
utilizado en componentes
<script setup>
import {
storeToRefs } from 'pinia'
import {
useStore } from '../store/index'
const store = useStore();
//直接使用
store.addNum(100)
</script>
2. ¿Cómo se divide Pinia en módulos?
Pinia no necesita usar módulos para dividir módulos como Vuex, Pinia puede definir directamente el módulo correspondiente en el directorio de la tienda, lo cual es conciso y claro.
- 2.1 Estructura del directorio
store/user.ts //用户模块
store/shop.ts //商品模块
...
- 2.2 tienda/usuario.ts
import {
defineStore } from 'pinia'
export const user = defineStore({
id: 'user',
state:()=>{
return {
userInfo:{
nickName:'admin'
},
token:'xdsrrd-fsdsdsd02d5sdsd-dsds'
}
},
getters:{
},
actions:{
}
})
- 2.3 Utilizado en componentes
<template>
<div>
<h1>A组件</h1>
{
{
userInfo.nickName }}
</div>
</template>
<script setup>
import {
storeToRefs } from 'pinia'
// 模块一
import {
useStore } from '../store/index'
const store = useStore();
// 模块二
import {
user } from '../store/user'
const store = user();
// 使用语法同上
</script>
3. Almacenamiento persistente de Pinia
- 3.1 Instalar complementos
npm i pinia-plugin-persist --save
- 3.2 Introducido en el archivo de entrada main.js
import {
createPinia } from "pinia";
import piniaPluginPersist from "pinia-plugin-persist"; //pinia持久化
const pinia = createPinia();
pinia.use(piniaPluginPersist);
- 3.3 Uso en tienda
export const useStore = defineStore("main", {
state:()=>{
return {
}
},
getters:{
},
actions:{
}
//持久化
persist: {
enabled: true,
// 自定义持久化参数
strategies: [
{
// 自定义key,默认就是仓库的key
key: "token",
// 自定义存储方式，默认sessionStorage
storage: localStorage,
// 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
paths: ["token"],
},
{
key: "menulist",
storage: localStorage,
paths: ["menulist"],
},
],
},
});
Si hay alguna deficiencia, no dude en agregarla. Las correcciones son bienvenidas. . .