# 緩存用法 [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> ```