# 缓存用法 [TOC=2,3] ## Store 临时缓存 > 特点：需要定义，有初始值、响应式、全局使用、刷新重置 > Pinia官方文档 https://pinia.vuejs.org ### 创建 store 缓存 示例代码 ``` js 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 缓存 示例代码 ``` html <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 的示例代码 ``` html <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> ```