Store 临时缓存
特点:需要定义,有初始值、响应式、全局使用、刷新重置
Pinia官方文档 https://pinia.vuejs.org
创建 store 缓存
示例代码
import {defineStore} from 'pinia'
import {store} from '/@/store'
export const useMyStore = defineStore({
// 定义缓存id
id: '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>