From 8530cd8cc20fd5d51e3621a6441be6ce927e2134 Mon Sep 17 00:00:00 2001
From: jzfai <869653722@qq.com>
Date: Fri, 31 Dec 2021 13:47:43 +0800
Subject: [PATCH] change mixin to hooks

---
 src/hooks/useCommon.js                       | 35 ++++++++++++++++++++
 src/hooks/useRouter.js                       | 18 +++++-----
 src/main.js                                  |  1 -
 src/views/example/keep-alive/RouterDemoF.vue |  8 ++---
 src/views/example/keep-alive/RouterDemoS.vue |  8 ++---
 5 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 src/hooks/useCommon.js

diff --git a/src/hooks/useCommon.js b/src/hooks/useCommon.js
new file mode 100644
index 0000000..909ea74
--- /dev/null
+++ b/src/hooks/useCommon.js
@@ -0,0 +1,35 @@
+import { reactive, toRefs } from 'vue'
+import momentMini from 'moment-mini'
+let hooksFunc = function () {
+  //data
+  let state = reactive({
+    //time relative
+    todayTimeMixin: null,
+    currentTimeMixin: null,
+    todayTimeLastMixin: null,
+    yesterdayTimeMixin: null,
+    beforeThreeDateTimeMixin: null
+  })
+
+  //create
+  state.todayTimeMixin = momentMini().startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  state.currentTimeMixin = momentMini(new Date()).format('YYYY-MM-DD HH:mm:ss')
+  state.todayTimeLastMixin = momentMini().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  state.beforeThreeDateTimeMixin = momentMini().add(-3, 'days').format('YYYY-MM-DD HH:mm:ss')
+  state.yesterdayTimeMixin = momentMini().add(-1, 'days').format('YYYY-MM-DD HH:mm:ss')
+
+  //function
+  const sleepMixin = (time) => {
+    return new Promise((resolve) => {
+      const timer = setTimeout(() => {
+        clearTimeout(timer)
+        resolve()
+      }, time)
+    })
+  }
+  return {
+    sleepMixin,
+    state
+  }
+}
+export default hooksFunc()
diff --git a/src/hooks/useRouter.js b/src/hooks/useRouter.js
index 5e5a868..bf0ccab 100644
--- a/src/hooks/useRouter.js
+++ b/src/hooks/useRouter.js
@@ -1,14 +1,13 @@
-import { reactive } from 'vue'
+import { reactive, toRefs } from 'vue'
 import router from '@/router'
 let hooksFunc = function () {
   const route = router.currentRoute
-  let state = reactive({
-    queryParamsMixin: null
-  })
-  if (route?.query?.params) {
-    state.queryParamsMixin = JSON.parse(route.query.params)
+  const getQueryParam = () => {
+    if (route.value.query.params) {
+      return JSON.parse(route.value.query.params)
+    }
   }
-  // vue router跳转
+  // vue router
   const routerPushMixin = (name, params) => {
     let data = {}
     if (params) {
@@ -40,12 +39,13 @@ let hooksFunc = function () {
   const routerBackMixin = () => {
     router.go(-1)
   }
-
   return {
     routerPushMixin,
     routerReplaceMixin,
     routerBackMixin,
-    ...state
+    getQueryParam
   }
 }
+
+// hooksFunc() not direct use the  mounted , but hooksFunc can use
 export default hooksFunc()
diff --git a/src/main.js b/src/main.js
index 5538ecb..93fe9f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,7 +12,6 @@ app.use(Vant)
 //part import by you need
 // import vantUtils from '@/utils/vantUtils'
 // app.use(vantUtils)
-
 //import router
 app.use(router)
 import router from './router'
diff --git a/src/views/example/keep-alive/RouterDemoF.vue b/src/views/example/keep-alive/RouterDemoF.vue
index 937bc1d..cfde59a 100644
--- a/src/views/example/keep-alive/RouterDemoF.vue
+++ b/src/views/example/keep-alive/RouterDemoF.vue
@@ -14,13 +14,9 @@
   </div>
 </template>
 <script setup>
-import { onMounted } from 'vue'
 import useRouter from '@/hooks/useRouter'
-
-onMounted(() => {
-  //get page pass url data
-  console.log(useRouter.queryParamsMixin)
-})
+import useCommon from '@/hooks/useCommon'
+console.log(useCommon.state.todayTimeMixin)
 const routerDemoS = () => {
   useRouter.routerPushMixin('routerDemoS', { name: 'routerDemoS' })
 }
diff --git a/src/views/example/keep-alive/RouterDemoS.vue b/src/views/example/keep-alive/RouterDemoS.vue
index 81ad581..c6fecfa 100644
--- a/src/views/example/keep-alive/RouterDemoS.vue
+++ b/src/views/example/keep-alive/RouterDemoS.vue
@@ -13,10 +13,10 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import useRouter from '@/hooks/useRouter'
-onMounted(() => {
-  console.log(useRouter.queryParamsMixin)
-})
+import { getQueryParam } from '@/hooks/useRouter'
+let { rou } = useRouter
+
+console.log(useRouter.getQueryParam())
 </script>
 
 <style scoped lang="scss"></style>