1. Introducción
Pinia es una nueva herramienta de gestión de estado para vue3. En pocas palabras, es equivalente al vuex anterior. Elimina mutaciones pero también es compatible con vue2. Los amigos que lo necesiten pueden consultarlo.
2. Cómo utilizar
1.Instalación
npm instala pinia -S
2. Introducción
importar {createPinia,PiniaPluginContext} desde 'pinia'
importar {createApp,toRaw} desde 'vue'
importar aplicación desde './App.vue'
tienda constante = crearPinia()
aplicación constante = crear aplicación (aplicación)
aplicación.uso(tienda)
aplicación.mount('#aplicación')
3. Crea una carpeta de tienda.
En el directorio src, cree un archivo de tienda
Nota: pinia No es necesario crear modules un archivo para diferenciar entre modular y vuex .
tienda/index.ts
import {defineStore } from 'pinia'
import {Names} from './store-name'
type User = {
name:string,
age:number
}
const result:User = {
name:'xiaochen',
age:888,
}
const asyncResult:User ={
name:'异步名字',
age:999,
}
const Login = ():Promise<User> =>{
return new Promise((resolve) =>{
setTimeout(()=>{
resolve(asyncResult)
},2000)
})
}
//第一个参数 命名空间唯一值
export const useTestStore = defineStore(Names.TEST,{
state:()=>{
return{
current:122,
name:'xiaochen2',
user:<User>{},
asyncUser:<User>{},
}
},
//相当于computed 修饰一些值 有缓存的
getters:{
newName ():string{
return `$-${this.name}-${this.getUserAge}`
},
getUserAge():number{
return this.user.age || 1
}
},
//methods 可以做同步 异步也支持 提交state
actions:{
// setCurrent(num:number){
// this.current = num
// },
//同步
setUser(){
this.user = result
},
//异步
async getUser(){
const resultList = await Login()
this.asyncUser = resultList
this.setName('超级帅的飞机')//相互调用方法
this.setAge(6666)//相互调用方法
},
setName (name:string){
this.name = name
},
setAge (age:number){
this.user.age = age
}
}
}) valor único para el espacio de nombres
export const enum Names {
TEST = 'TEST',
BASE = 'BASE'
}
4. Utilice Pinia
importar {useTestStore} desde "../store";
const sinaTest = useTestStore();
5. Modificar datos (cinco métodos)
Método 1: cambiar directamente
<div class="contenedor">
Pinia:{ { sinaTest.current }} -- { { sinaTest.name }}
<botón @click="cambiar">改变</botón>
</div>
cambio constante = () => {
sinaTest.current++;
};
Método 2: use el parche para cambiar directamente
cambio constante = () => {
sinaTest.$parche({
actual: 888,
nombre: "黑丝",
});
};
Método 3: use $patch para pasar parámetros
cambio constante = () => {
//Puedes escribir funciones de fábrica
sinaTest.$patch((estado) => {
estado.actual = 999;
estado.nombre = "Dilraba";
});
};
Método 4: utilice la modificación $state ( no recomendado debido a desventajas )
cambio constante = () => {
//Puedes escribir funciones de fábrica
sinaTest.$estado = {
actual: 2000,
nombre: "134",
};
};
Método 5: cambiar a través de acciones
cambio constante = () => {
sinaTest.setCurrent(852);
};
Estos son solo algunos métodos de modificación simples. El uso específico debe combinarse con el escenario comercial. Para obtener información detallada, puede leer la documentación oficial de Pinia.
3. Almacenamiento persistente
pinia Del vuex mismo modo, los datos son de corta duración. Tan pronto como se actualice la página, los datos se restaurarán a su estado inicial. Para evitar este problema, puede utilizar un método de guardado persistente.
El principio pinia del guardado persistente es que cuando los datos se actualizan , se guardan en o sincrónicamente y los datos se leen desde el almacenamiento local después de la actualización. localStoragesessionStorage
Aquí hay dos formas de implementarlo.
uno: escritura a mano
1. Escriba uno usted mismo para lograr persistencia (escriba en main.ts)
Primero, echemos un vistazo a los parámetros que puede obtener pinpa.
A través de la impresión anterior, sabemos dónde existen los datos correspondientes y podemos escribir a mano
//先手写我们存储数据的localStorage
const getStorage = (key:string) =>{
return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string):{}
}
//存储数据
const setStorage = (key:string,value:any) => {
localStorage.setItem(key,JSON.stringify(value)) //value可能是对象或者数组 所以JSON.stringify需要这个转换成字符串 ['1','2','3'] => '['1','2','3']'
}2. Escriba a mano nuestra función de complemento (optimización de curry): curry es convertir una función de múltiples parámetros en una función de un solo parámetro
Análisis: opciones?.key ??__piniaKey__ Cuando no se pasa la clave, el valor predeterminado es __piniaKey__, cuando se pasa, son los datos pasados. Hay una introducción al uso a continuación.
El operador coalescente nulo (??) es un operador lógico que devuelve la expresión de la derecha si la expresión de la izquierda es nullo ; en caso contrario, devuelve la expresión de la izquierda.undefined
//函数柯里化 柯里化就是将一个多参数的函数 转换成单参数的函数
const piniaPlugin = (options:Options) =>{
return (context:PiniaPluginContext)=>{ //拿取到pinpa的参数
console.log('context',context);
const {store} = context //解构我们需要的store
const data = getStorage(`${options?.key ??__piniaKey__}-${store.$id}`) //获取到key
console.log('data',data);
//可以通过$subscribe监测到store数据变化
store.$subscribe(()=>{
// 每当它发生变化时，将整个状态持久化到本地存储
//${options?.key ??__piniaKey__}-${store.$id} 唯一值key
setStorage(`${options?.key ??__piniaKey__}-${store.$id}`,toRaw(store.$state)) //store.$state proxy对象 toRaw把它转为原始对象
})
return{
...data
}
}
}3. Utilice nuestros complementos
store.use(piniaPlugin({
key:'pinia' //传值key过去 存储用这个名字
}))4.El efecto es el siguiente
2. Utilice complementos
1.Instale el complemento
npm instala pinia-plugin-persist
2.Introducir complementos
importar piniaPersist desde 'pinia-plugin-persist'
pinia.use(piniaPersistir)
3. Utilice complementos
①Establezca la clave y especifique el contenido guardado
export const useBaseStore = defineStore(Names.BASE, {
state: () => {
return {
baseUrl: "http://localhost:9090",
BaseCurrent: 0,
};
},
persist: {
enabled: true, // true 表示开启持久化保存
strategies: [
{
key: 'base',
storage: localStorage,
paths: ['BaseCurrent','baseUrl']
},
],
},
//相当于computed 修饰一些值 有缓存的
getters: {},
//methods 可以做同步 异步也支持 提交state
actions: {},
}); //第一个参数 命名空间唯一值
②Incluso puedes configurar diferentes métodos de almacenamiento local para diferentes datos.
export const useBaseStore = defineStore(Names.BASE, {
state: () => {
return {
baseUrl: "http://localhost:9090",
BaseCurrent: 0,
testType:'test',
};
},
persist: {
enabled: true, // true 表示开启持久化保存
strategies: [
{
key: 'base',
storage: localStorage,
paths: ['BaseCurrent','baseUrl']
},
{
key: 'base2',
storage: sessionStorage,
paths: ['testType']
},
],
},
//相当于computed 修饰一些值 有缓存的
getters: {},
//methods 可以做同步 异步也支持 提交state
actions: {},
}); //第一个参数 命名空间唯一值
③Guardar en cookie
cookie Por supuesto, también es posible guardar en Medio, pero debe agregar manualmente cookie un método de guardado. De manera similar, se recomienda utilizar el complemento js-cookie aquí para completarlo. Generalmente utilizado para almacenar tokens.
npm instala js-cookie
import Cookies from 'js-cookie'
//存储在cookie
const cookiesStorage: Storage = {
setItem(key, state:any) {
console.log('state',state);
return Cookies.set(key, state, { expires: 3 }); // 设置有效期 3 天，不设置默认同 sessionStorage 有效期一致
},
getItem(key) {
return JSON.stringify({
accessToken: Cookies.get(key),
});
},
length: 0,
clear: function (): void {
throw new Error("Function not implemented.");
},
key: function (index: number): string | null {
throw new Error("Function not implemented.");
},
removeItem: function (key: string): void {
throw new Error("Function not implemented.");
}
}
export const useBaseStore = defineStore(Names.BASE, {
state: () => {
return {
baseUrl: "http://localhost:9090",
BaseCurrent: 0,
testType:'test',
token:'12314',
};
},
persist: {
enabled: true, // true 表示开启持久化保存
strategies: [
{
key: 'base',
storage: localStorage,
paths: ['BaseCurrent','baseUrl']
},
{
key: 'base2',
storage: sessionStorage,
paths: ['testType']
},
{
key: 'tokenSave',
storage: cookiesStorage,
paths: ['token']
},
],
},
//相当于computed 修饰一些值 有缓存的
getters: {},
//methods 可以做同步 异步也支持 提交state
actions: {},
}); //第一个参数 命名空间唯一值