Created
October 16, 2021 07:59
-
-
Save turbotobias/83dedc685cf7a8b555bca1974e108684 to your computer and use it in GitHub Desktop.
Pinia store handler for timing actions runtime
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { useStore } from './store' | |
| import { storeActionTimer } from './helpers' | |
| const store = useStore() | |
| store.$onAction(storeActionTimer) | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const logNow = (startTime: number, ...aargs: any[]) => { | |
| const color = (milliseconds: number) => { | |
| if (milliseconds < 7) return "color: #000000" | |
| if (milliseconds > 10) return "color: #840000" | |
| return "color: #FA7238" | |
| } | |
| const ms = performance.now() - startTime | |
| console.log(`⏱️%c ${ms}ms`, color(ms), aargs) | |
| } | |
| export const storeActionTimer = ({ | |
| name, // name of the action | |
| args, // array of parameters passed to the action | |
| after, // hook after the action returns or resolves | |
| onError, // hook if the action throws or rejects | |
| }: // any because unique for you and because snippet whatever | |
| any) => { | |
| const now = performance.now | |
| onError((err: any) => { | |
| logNow(now, `${name}()`, args) | |
| console.trace(err) | |
| }) | |
| after(() => { | |
| logNow(now, `${name}()`, args) | |
| }) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { defineStore } from 'pinia' | |
| export const useStore = defineStore({ | |
| id: "store", | |
| state() { | |
| return { | |
| loading: false | |
| } | |
| }, | |
| actions: { | |
| dbStart() { | |
| this.loading = true | |
| }, | |
| dbStop() { | |
| this.loading = false | |
| } | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment