간단히
데이터의 영구 저장을 위해 pinia 및 pinia-plugin-persistedstate 종속성을 사용합니다.
보관 방법:
- 로컬 스토리지
- 세션 저장소
pinia-plugin-persistedstate 중국어 공식 웹 사이트
피니아 중국어 공식 홈페이지
설치하다
pinia를 설치하고 사용하려면 pinia 사용에 대한 기사를 참조하십시오 .
pinia-plugin-persistedstate 설치:
npm i pinia-plugin-persistedstate
# 或
pnpm i pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate
pinia-plugin-persistedstate 영구 저장소 사용
산
사용하기 전에 pinia 인스턴스에 pinia-plugin-persistedstate를 추가합니다.
import {
createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
추가할 때 파라미터를 추가하여 pinia-plugin-persistedstate의 기본 구성을 수정할 수 있습니다. 예를 들면 다음과 같습니다.
pinia.use(piniaPluginPersistedstate({
auto:true, // 该配置将会使所有 Store 持久化存储，且必须配置 persist: false 显式禁用持久化。
storage: sessionStorage, // 默认持久化存储方式 修改为 sessionStorage
})
위 수정의 기본 구성은 모든 저장소 영구 저장소를 활성화하는 것이며 기본 저장소 방법은 sessionStorage 입니다 .
매장에서 사용
스토어를 생성할 때 영구 옵션을 true로 설정합니다.
import {
defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: '你好 pinia',
}
},
persist: true,
})
또는
import {
defineStore } from 'pinia'
export const useStore = defineStore(
'main',
() => {
const someState = ref('你好 pinia')
return {
someState }
},
{
persist: true,
}
)
위 저장소의 모든 데이터는 기본 구성을 사용하여 영구적으로 저장됩니다.
기본 할당
- 저장을 위해 localStorage 사용
- 저장소 기본 키로 store.$id
- JSON.stringify/JSON.parse를 사용하여 직렬화/역직렬화
- 전체 상태는 기본적으로 유지됩니다.
맞춤형 구성
persist는 객체가 될 수 있습니다.
import {
defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({
someState: '你好 pinia',
}),
persist: {
// 在这里进行自定义配置
},
})
지속 개체는 다음 속성으로 구성할 수 있습니다.
- 키
유형: 문자열
기본값: store.$id
저장소에 있는 데이터를 참조하기 위해 사용되는 키 - 스토리지
유형: StorageLike
기본값: localStorage
데이터가 지속되는 스토리지에는 getItem: (key: string) => string | null 및 setItem: (key: string, value: string) => void 의 두 가지 메서드가 있어야 합니다 . - 경로
유형: 문자열[]
기본값: 정의되지 않음
상태에서 유지해야 하는 데이터를 지정하는 데 사용됩니다. []는 어떤 상태도 유지하지 않는다는 의미이고, undefined 또는 null은 전체 상태를 유지한다는 의미입니다 . - 직렬 변환기
유형: 직렬 변환기
기본값: JSON.stringify/JSON.parse
이 구성은 지속성에 사용되는 직렬화 방법과 Store 복원을 위한 역직렬화 방법을 지정할 수 있습니다 . 또한 serialize: (value: StateTree) => string 및 deserialize: (value: string) => StateTree 메서드가 있어야 합니다. - beforeRestore
유형: (컨텍스트: PiniaPluginContext) => 무효
기본값: 정의되지 않음
이 후크는 저장소에서 데이터를 복원하기 전에 트리거되며 데이터를 복원하기 전에 특정 작업을 강제하는 데 사용할 수 있는 전체 PiniaPluginContext에 액세스할 수 있습니다. - afterRestore
유형: (context: PiniaPluginContext) => void
기본값: 정의되지 않음
이 후크는 스토리지에서 데이터를 복원한 후 트리거되며 데이터를 복원한 후 특정 작업을 강제로 수행하는 데 사용할 수 있는 전체 PiniaPluginContext에 액세스할 수 있습니다. - 디버그
유형: 부울
기본값: false
true로 설정하면 Store를 유지/복구할 때 발생할 수 있는 모든 오류가 console.error를 사용하여 출력됩니다 .
예
/*
* @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'
}
})
[참고] 이 영구 저장소는 자동으로 저장됩니다. 언제입니까? 스토어 이용시.
데이터의 선택적 지속성
대부분의 경우 저장소의 데이터는 데이터의 일부만 저장하면 됩니다.
persist는 배열도 허용합니다. 선택적으로 일부 데이터를 저장할 수 있습니다.
import {
defineStore } from 'pinia'
defineStore('store', {
state: () => ({
toLocal: '',
toSession: '',
toNowhere: '',
}),
persist: [
{
paths: ['toLocal'],
storage: localStorage,
},
{
paths: ['toSession'],
storage: sessionStorage,
},
],
})
예:
/*
* @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
},
]
})
알아채다
데이터가 직렬화되므로 Date와 같은 기본이 아닌 유형은 Date 객체로 저장되지 않고 문자열로 저장됩니다.
사용자 지정 스토리지를 제공할 때 해당 메서드는 동기식이어야 합니다. 이는 Pinia의 상태 구독($subscribe)이 동기식(변형과 일치)이기 때문입니다.
발문
끝났어.