fix: history back and forward bug

Author: runkids

examples/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "vue": "^3.0.0-beta.18",
     "vue-condition-watcher": "^0.0.11",
-    "vue-router": "^4.0.0-alpha.13"
+    "vue-router": "^4.0.0-beta.1"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.0-beta.18",

package.json

@@ -53,8 +53,7 @@
     ]
   },
   "dependencies": {
-    "vue-demi": "^0.1.3",
-    "rfdc": "^1.1.4"
+    "vue-demi": "^0.1.3"
   },
   "devDependencies": {
     "@types/jest": "24.0.20",
@@ -73,7 +72,8 @@
     "ts-jest": "24.1.0",
     "typescript": "^3.9.2",
     "vue": "^3.0.0-beta.18",
-    "vue-router": "^4.0.0-alpha.13"
+    "vue-router": "^4.0.0-beta.1",
+    "rfdc": "^1.1.4"
   },
   "peerDependencies": {
     "vue": "^3.0.0-beta.18"

src/types.ts

@@ -1,3 +1,28 @@
+import { Ref, InjectionKey } from 'vue-demi'
+
 export type ConditionsType = {
   [propName: string]: any
 }
+
+export type FetcherType = (params: ConditionsType) => Promise<any>
+export type ProvideKeyName<T> = InjectionKey<T> | string
+
+export interface QueryOptions<T> {
+  sync?: ProvideKeyName<T>
+  ignore?: string[]
+}
+
+export interface Config {
+  fetcher: FetcherType
+  conditions: ConditionsType
+  defaultParams?: ConditionsType
+  beforeFetch?: (conditions: ConditionsType) => ConditionsType
+}
+
+export interface ResultInterface {
+  conditions: { [x: string]: any }
+  loading: Ref<boolean | false>
+  data: Ref<any | null>
+  refresh: Ref<() => void>
+  error: Ref<any | null>
+}

src/useConditionWatcher.ts

@@ -1,37 +1,15 @@
-import { reactive, toRefs, ref, watch, Ref, watchEffect, inject, InjectionKey } from 'vue-demi'
-import { ConditionsType } from './types'
+import { reactive, ref, watch, watchEffect, inject, onMounted, onUnmounted } from 'vue-demi'
+import { ConditionsType, Config, QueryOptions, ResultInterface } from './types'
 import { filterNoneValueObject, createParams, stringifyQuery, syncQuery2Conditions } from './utils'
+import { useFetchData } from './useFetchData'
+import { useParseQuery } from './useParseQuery'
 import clone from 'rfdc'
-import { Router } from 'vue-router'
-
-type FetcherType = (params: ConditionsType) => Promise<any>
-type ProvideKeyName<T> = InjectionKey<T> | string
-
-interface QueryOptions<T> {
-  sync?: ProvideKeyName<T>
-  ignore?: string[]
-}
-
-interface Config {
-  fetcher: FetcherType
-  conditions: ConditionsType
-  defaultParams?: ConditionsType
-  beforeFetch?: (conditions: ConditionsType) => ConditionsType
-}
-
-interface ResultInterface {
-  conditions: { [x: string]: any }
-  loading: Ref<boolean | false>
-  data: Ref<any | null>
-  refresh: Ref<() => void>
-  error: Ref<any | null>
-}
 
 export default function useConditionWatcher<T extends Config, E extends QueryOptions<E>>(
   config: T,
   queryOptions?: E
 ): ResultInterface {
-  let router: Router
+  let router = null
   const _conditions = reactive(config.conditions)
   const loading = ref(false)
   const data = ref(null)
@@ -40,6 +18,13 @@ export default function useConditionWatcher<T extends Config, E extends QueryOpt
   const query = ref({})
   const completeInitialConditions = ref(false)
 
+  const syncConditionsByQuery = () => {
+    const { query: initQuery } = useParseQuery()
+    console.log('initQuery== ', initQuery)
+    syncQuery2Conditions(_conditions, initQuery)
+    completeInitialConditions.value = true
+  }
+
   const fetch = (conditions: ConditionsType): void => {
     const { loading: fetchLoading, result: fetchResult, error: fetchError, use: fetchData } = useFetchData(() =>
       config.fetcher(conditions)
@@ -90,42 +75,30 @@ export default function useConditionWatcher<T extends Config, E extends QueryOpt
     }
   )
 
-  if (
-    queryOptions &&
-    (typeof queryOptions.sync === 'string' || typeof queryOptions.sync === 'function') &&
-    queryOptions.sync.length
-  ) {
+  if (queryOptions && typeof queryOptions.sync === 'string' && queryOptions.sync.length) {
     router = inject(queryOptions.sync)
-    if (router && router.isReady) {
-      router.isReady().then(() => {
-        // watch query changed
-        watch(query, async () => {
-          const path: string = router.currentRoute.value.path
-          const queryString = stringifyQuery(query.value, queryOptions.ignore || [])
-          completeInitialConditions.value = false
-          await router.push(path + '?' + queryString)
-        })
+    if (router) {
+      // initial conditions by window.location.search. just do once.
+      syncConditionsByQuery()
+      // watch query changed
+      watch(query, async () => {
+        const path: string = router.currentRoute.value.path
+        const queryString = stringifyQuery(query.value, queryOptions.ignore || [])
+        await router.push(path + '?' + queryString)
+      })
+
+      onMounted(() => {
+        window.addEventListener('popstate', syncConditionsByQuery)
+      })
+      onUnmounted(() => {
+        window.removeEventListener('popstate', syncConditionsByQuery)
       })
-      // watch router changed
-      watch(
-        router.currentRoute,
-        (currentRoute, preCurrentRoute) => {
-          const oldFullPath = preCurrentRoute ? preCurrentRoute.fullPath : ''
-          if (currentRoute.fullPath !== oldFullPath) {
-            //back/forward page sync query string to _conditions
-            syncQuery2Conditions(_conditions, currentRoute.query)
-            completeInitialConditions.value = true
-          }
-        },
-        {
-          immediate: true,
-        }
-      )
     } else {
-      throw new ReferenceError('[vue-condition-watcher] Could not found vue-router instance.')
+      throw new ReferenceError(
+        `[vue-condition-watcher] Could not found vue-router instance. Please check key: ${queryOptions.sync} is right!`
+      )
     }
   }
-
   completeInitialConditions.value = true
 
   return {
@@ -136,33 +109,3 @@ export default function useConditionWatcher<T extends Config, E extends QueryOpt
     error,
   }
 }
-
-function useFetchData<T>(fetcher: () => Promise<T>) {
-  const state = reactive({
-    loading: false,
-    error: null,
-    result: null,
-  })
-
-  let lastPromise: Promise<T>
-  const use = async () => {
-    state.error = null
-    state.loading = true
-    const promise = (lastPromise = fetcher())
-    try {
-      const result = await promise
-      if (lastPromise === promise) {
-        state.result = result
-      }
-    } catch (e) {
-      state.error = e
-    } finally {
-      state.loading = false
-    }
-  }
-
-  return {
-    ...toRefs(state),
-    use,
-  }
-}

src/useFetchData.ts

@@ -0,0 +1,31 @@
+import { reactive, toRefs } from 'vue-demi'
+
+export function useFetchData<T>(fetcher: () => Promise<T>) {
+  const state = reactive({
+    loading: false,
+    error: null,
+    result: null,
+  })
+
+  let lastPromise: Promise<T>
+  const use = async () => {
+    state.error = null
+    state.loading = true
+    const promise = (lastPromise = fetcher())
+    try {
+      const result = await promise
+      if (lastPromise === promise) {
+        state.result = result
+      }
+    } catch (e) {
+      state.error = e
+    } finally {
+      state.loading = false
+    }
+  }
+
+  return {
+    ...toRefs(state),
+    use,
+  }
+}

src/useParseQuery.ts

@@ -0,0 +1,37 @@
+function decode(text: string | number): string {
+  try {
+    return decodeURIComponent('' + text)
+  } catch (err) {
+    console.error(`Error decoding "${text}".`)
+  }
+  return '' + text
+}
+
+function parseQuery(search: string) {
+  const query = {}
+  if (search === '' || search === '?') return query
+  const hasLeadingIM = search[0] === '?'
+  const searchParams = (hasLeadingIM ? search.slice(1) : search).split('&')
+  for (let i = 0; i < searchParams.length; ++i) {
+    let [key, rawValue] = searchParams[i].split('=') as [string, string | undefined]
+    key = decode(key)
+    let value = rawValue == null ? null : decode(rawValue)
+    if (key in query) {
+      let currentValue = query[key]
+      if (!Array.isArray(currentValue)) {
+        currentValue = query[key] = [currentValue]
+      }
+      currentValue.push(value)
+    } else {
+      query[key] = value
+    }
+  }
+  return query
+}
+
+export function useParseQuery(queryString?: string) {
+  let query = queryString ? queryString : window.location.search.substring(1)
+  return {
+    query: parseQuery(query),
+  }
+}

yarn.lock

@@ -4502,10 +4502,10 @@ vue-demi@^0.1.3:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.1.3.tgz#e16321d20b025e95227fba01607f86e1fc9726e4"
   integrity sha512-0h9/PwtrJx8oZeOd4ftGNlpnWUxp9HoGy+Wengw4pvdUi0o1+PLMaCpoQZ9tNGnTom8cz90M1ydxJgJg3InCpA==
 
-vue-router@^4.0.0-alpha.13:
-  version "4.0.0-alpha.14"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.0-alpha.14.tgz#4bc5fed1db61b8d04fd95ad9c499c7428f039a0e"
-  integrity sha512-ydWSXxXAsTCiJ31V4x4ZAKI1CdpPMhf7b2LPi4AmG5SCgduu1zf+LhzWWHXmgbmheEiJpfecigVIZp4ABpZJmw==
+vue-router@^4.0.0-beta.1:
+  version "4.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.0-beta.1.tgz#8ccdc37c991efa30d1519f885dd772307715503a"
+  integrity sha512-byqdBiKISN9Qrse6A0fgR6tePQNwlAdx+wBgO2x08MEn6hy8ds19uKvosfruVjw5vhpFmjvGR15Z68an+7fRAQ==
 
 vue@*:
   version "2.6.11"