【WIP】【FOR CR ONLY】实现了一个debounce

.gitignore

@@ -14,7 +14,6 @@ yarn-error.log*
 pnpm-debug.log*
 
 # Editor directories and files
-.vscode
 .idea
 *.suo
 *.ntvs*

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.validate": ["vue", "javascript", "typescript", "javascriptreact", "typescriptreact"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

README.md

@@ -1,21 +1,33 @@
 # ebook_reader
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run dev
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### start local file serve
+
 ```
 npm run serve
 ```
+
+### vscode plugin
+
+- [johnsoncodehk.volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+  > do not install **any other** vue plugin or disable them all!
+- [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [mikestead.dotenv](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { piniaInstance } from '@/plugins/pinia'
 import App from './App.vue'
 import './assets/style/main.scss'
 import router from './router'
@@ -20,4 +20,4 @@ app.directive('intersect', Intersect)
 app.directive('click-outside', ClickOutside)
 app.component('n-icon', NIcon)
 
-app.use(createPinia()).use(router).use(naive).mount('#app')
+app.use(piniaInstance).use(router).use(naive).mount('#app')

src/plugins/pinia/debounce/index.ts

@@ -0,0 +1,23 @@
+import { PiniaPluginContext } from 'pinia'
+import { debounce } from 'lodash'
+
+declare module 'pinia' {
+  export interface DefineStoreOptions<Id extends string, S extends StateTree, G, A>
+    extends DefineStoreOptionsBase<S, Store<Id, S, G, A>> {
+    debounce?: {
+      // allow defining a number of ms for any of the actions
+      [k in keyof A]?: number
+    }
+  }
+}
+
+/** 允许定义store时对某些action设置 debounce */
+export function debounceAction({ options, store }: PiniaPluginContext) {
+  if (options.debounce) {
+    // we are overriding the actions with new ones
+    return Object.keys(options.debounce).reduce((debouncedActions, action) => {
+      debouncedActions[action] = debounce(store[action], options.debounce![action])
+      return debouncedActions
+    }, {} as any)
+  }
+}

src/plugins/pinia/index.ts

@@ -0,0 +1,7 @@
+import { createPinia } from 'pinia'
+import { debounceAction } from './debounce'
+
+const piniaInstance = createPinia()
+piniaInstance.use(debounceAction)
+
+export { piniaInstance }

src/store/read.ts

@@ -41,7 +41,7 @@ export const useReadStore = defineStore('app.read', {
       }
       return this.book.opened.then(async (book) => {
         // 加载书籍信息并保存
-        const info = (await localforage.getItem(this.bookId)) as Record<string, unknown>
+        const info = await localforage.getItem<Record<string, unknown>>(this.bookId)
 
         if (info && info.cover) {
           this.cover = info.cover as string