Brevemente
Utilice las dependencias pinia y pinia-plugin-persistedstate para el almacenamiento persistente de datos.
Método de almacenamiento:
- almacenamiento local
- sesiónAlmacenamiento
pinia-plugin-persistedstate sitio web oficial chino
sitio web oficial chino pinia
Instalar
Para instalar y usar pinia, consulte el artículo sobre el uso de pinia .
Instale pinia-plugin-persistedstate:
npm i pinia-plugin-persistedstate
# 或
pnpm i pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate
Usar almacenamiento persistente pinia-plugin-persistedstate
montar
Agregue pinia-plugin-persistedstate a la instancia de pinia antes de usar.
import {
createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
Al agregar, puede agregar parámetros para modificar la configuración predeterminada de pinia-plugin-persistedstate, por ejemplo:
pinia.use(piniaPluginPersistedstate({
auto:true, // 该配置将会使所有 Store 持久化存储，且必须配置 persist: false 显式禁用持久化。
storage: sessionStorage, // 默认持久化存储方式 修改为 sessionStorage
})
La configuración predeterminada de la modificación anterior es habilitar el almacenamiento persistente de todas las tiendas, y el método de almacenamiento predeterminado es sessionStorage .
usar en la tienda
Al crear la tienda, establezca la opción persistente en verdadero.
import {
defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: '你好 pinia',
}
},
persist: true,
})
o
import {
defineStore } from 'pinia'
export const useStore = defineStore(
'main',
() => {
const someState = ref('你好 pinia')
return {
someState }
},
{
persist: true,
}
)
Todos los datos en el almacén anterior se almacenarán de forma persistente, utilizando la configuración predeterminada.
asignación predeterminada
- Usar localStorage para el almacenamiento
- store.$id como clave predeterminada de almacenamiento
- Serializar/Deserializar usando JSON.stringify/JSON.parse
- Todo el estado se conservará de forma predeterminada
configuración personalizada
persist puede ser un objeto.
import {
defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({
someState: '你好 pinia',
}),
persist: {
// 在这里进行自定义配置
},
})
El objeto persistente se puede configurar con las siguientes propiedades:
- tipo de clave
: cadena
valor predeterminado: store.$id
La clave se usa para referirse a los datos almacenados - Tipo de almacenamiento
: StorageLike
Valor predeterminado: localStorage
El almacenamiento en el que se conservan los datos debe tener dos métodos: getItem: (key: string) => string | null y setItem: (key: string, value: string) => void . - tipo de rutas
: cadena[]
Valor predeterminado: indefinido
Se utiliza para especificar qué datos en el estado deben conservarse. [] significa no persistir en ningún estado, indefinido o nulo significa persistir en todo el estado .
tipo de serializador
: Serializador Valor predeterminado: JSON.stringify/JSON.parse
Esta configuración puede especificar el método de serialización utilizado para la persistencia y el método de deserialización para restaurar la Tienda . Además, debe tener métodos serialize: (value: StateTree) => string y deserialize: (value: string) => StateTree.- beforeRestore
type: (context: PiniaPluginContext) => void
valor predeterminado: indefinido
Este enlace se activará antes de restaurar los datos del almacenamiento y puede acceder a todo el PiniaPluginContext, que se puede usar para forzar operaciones específicas antes de restaurar los datos. - afterRestore type
: (context: PiniaPluginContext) => void Valor predeterminado
: indefinido
- tipo de depuración : valor predeterminado
booleano : falso Cuando se establece en verdadero, cualquier error que pueda ocurrir al persistir/restaurar la Tienda se generará mediante console.error .
ejemplo
/*
* @Date: 2022-11-30 17:26:39
* @LastEditors: zhangsk
* @LastEditTime: 2023-04-14 11:26:46
* @FilePath: \basic-demo\src\store\index.ts
* @Label: Do not edit
*/
import {
defineStore } from 'pinia'
export const useStore = defineStore('main', {
// 类似data
state: () => {
return {
userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo') as string) : undefined,
token: undefined as string | undefined,
num: 1,
}
},
// 类似计算属性
getters: {
getNum2: (state) => state.num * 2
},
// 类似methods
actions: {
setUserInfo(info = null) {
this.userInfo = info || undefined
console.log(info);
localStorage.setItem('userInfo', JSON.stringify(info))
}
},
persist: {
paths: ['num'],
storage: sessionStorage,
key: 'my_num'
}
})
[Nota] Este almacenamiento persistente se almacena automáticamente, ¿cuándo es? Cuando usas la tienda.
Persistencia selectiva de datos
La mayoría de las veces, los datos en la tienda solo necesitan almacenar una parte de los datos.
persist también acepta una matriz. Opcionalmente, puede almacenar algunos datos
import {
defineStore } from 'pinia'
defineStore('store', {
state: () => ({
toLocal: '',
toSession: '',
toNowhere: '',
}),
persist: [
{
paths: ['toLocal'],
storage: localStorage,
},
{
paths: ['toSession'],
storage: sessionStorage,
},
],
})
Ejemplo:
/*
* @Date: 2022-11-30 17:26:39
* @LastEditors: zhangsk
* @LastEditTime: 2023-04-14 13:42:52
* @FilePath: \basic-demo\src\store\index.ts
* @Label: Do not edit
*/
import {
defineStore } from 'pinia'
export const useStore = defineStore('main', {
// 类似data
state: () => {
return {
userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo') as string) : undefined,
token: 'aaxswkjaoksjdohasdh' as string | undefined,
num: 1,
}
},
// 类似计算属性
getters: {
getNum2: (state) => state.num * 2
},
// 类似methods
actions: {
setUserInfo(info = null) {
this.userInfo = info || undefined
console.log(info);
localStorage.setItem('userInfo', JSON.stringify(info))
}
},
persist: [
{
paths: ['num'],
storage: sessionStorage,
key: 'my_num'
},
{
paths: ['token'],
key: 'token',
storage: localStorage
},
]
})
Aviso
Dado que los datos se serializarán, los tipos no primitivos como Fecha no se almacenan como objetos Fecha, sino como cadenas.
Al proporcionar almacenamiento personalizado, su método debe ser síncrono, esto se debe a que la suscripción estatal de Pinia ($subscribe) es síncrona (coherente con las mutaciones).
epílogo
se acabó.