change mixin to hooks

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()

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()

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'

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' })
 }

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>