vue缓存用法

Store 临时缓存

特点：需要定义，有初始值、响应式、全局使用、刷新重置
Pinia官方文档 https://pinia.vuejs.org

创建 store 缓存

示例代码

import {defineStore} from 'pinia'
import {store} from '/@/store'export const useMyStore = defineStore({// 定义缓存idid: 'my-store',// 在这里写当前缓存里储存的变量state() {return {msg: 'hello world!!',}},// 定义当前缓存公开的 getters，相当于vue的计算属性getters: {getMsg(): string {return this.msg},},// 定义当前缓存公开的方法，可以直接调用并传参actions: {setMsg(msg: string) {this.msg = msg},},
})// 在vue3的setup方法之外使用时，需要调用此方法
export function useUseMyStoreWithOut() {return useMyStore(store)
}

使用 store 缓存

示例代码

<template>{{ myStore.getMsg }}
</template><script lang="ts">
import {useMyStore} from '/@/store/modules/myStore'export default {name: '',setup() {const myStore = useMyStore()console.log(myStore.getMsg)return {myStore,}},
}
</script>

复制

LocalStorage 长期缓存

特点：无需定义，无初始值、非响应式、全局使用、刷新不重置、多页面可通用、可设置过期时间

调用缓存

以下为调用 LocalStorage 的示例代码

<template>{{ myStoreKey }}
</template><script lang="ts">
import {createLocalStorage} from '/@/utils/cache'export default {name: '',setup() {const ls = createLocalStorage()let myStoreKey = ls.get('myStoreKey')console.log(myStoreKey)function set(value) {ls.set('myStoreKey', value)}return {myStoreKey,set,}},
}
</script>