refactor: use setup

package.json

@@ -85,7 +85,7 @@
     "ts-loader": "^8.0.6",
     "typescript": "^4.0.3",
     "url-loader": "^4.1.1",
-    "v-easy-components": "2.0.0-beta.9",
+    "v-easy-components": "^2.0.0-beta.10",
     "vue-cli-plugin-electron-builder": "~2.0.0-rc.4"
   },
   "gitHooks": {

src/components/swiper/index.tsx

@@ -8,7 +8,7 @@ import {
 } from 'vue'
 import { FindMusicInteface } from '@/interface/index'
 import classnames from 'classnames'
-import { useInternal } from '@/utils/hook'
+import { useInternal } from '@/hooks/index'
 import './index.less'
 
 const prefix = 'swiper'

src/utils/hook.ts → src/hooks/hook.ts

@@ -1,4 +1,5 @@
-import { on, off } from './index'
+import { useStore } from 'vuex'
+import { on, off } from '@/utils/index'
 
 interface InternalHook {
   startInternal: () => void
@@ -27,24 +28,12 @@ export const useInternal = (ms: number, cb: () => void): InternalHook => {
   }
 }
 
-export const dragHook = (container: HTMLElement, target: HTMLElement) => {
-  // const boxClient = {
-  //   w: document.documentElement.offsetWidth,
-  //   h: document.documentElement.offsetHeight
-  // }
-
+export const useDrag = (container: HTMLElement, target: HTMLElement) => {
   const cache = {
     x: 0,
     y: 0
   }
 
-  // const containerClient = {
-  //   grapX: container.offsetLeft,
-  //   grapY: container.offsetTop,
-  //   w: container.offsetWidth,
-  //   h: container.offsetHeight
-  // }
-
   let clickPosition: {
     x: number
     y: number
@@ -81,15 +70,6 @@ export const dragHook = (container: HTMLElement, target: HTMLElement) => {
       requestAnimationFrame(() => {
         container.style.transform = `matrix(1, 0, 0, 1, ${left}, ${top}) translateZ(0)`
       })
-      // if (left >= 0 && left + containerClient.w <= boxClient.w) {
-
-      // }
-      // if (top >= 0 && top + containerClient.h <= boxClient.h) {
-      //   requestAnimationFrame(() => {
-      //     cache.y = top
-      //     container.style.transform = `matrix(1, 0, 0, 1, ${cache.x}, ${cache.y})`
-      //   })
-      // }
     }
   }
 
@@ -112,3 +92,21 @@ export const dragHook = (container: HTMLElement, target: HTMLElement) => {
     stop
   }
 }
+
+export function uesModuleStore<S>(NAMESPACED: string) {
+  const store = useStore()
+  const useActions = (type: string, payload: string) => {
+    return store.dispatch(NAMESPACED + '/' + type, payload)
+  }
+  const useState = (): S => {
+    return store.state[NAMESPACED]
+  }
+  const useMutations = (type: string, payload: string): void => {
+    store.commit(NAMESPACED + '/' + type, payload)
+  }
+  return {
+    useActions: useActions,
+    useMutations: useMutations,
+    useState: useState
+  }
+}

src/hooks/index.tsx

@@ -1,3 +1,4 @@
+export * from './hook'
 import { inject, provide } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'

src/layout/container.tsx

@@ -1,61 +1,64 @@
-import { defineComponent, nextTick, ComponentPublicInstance, ref } from 'vue'
+import {
+  defineComponent,
+  nextTick,
+  ComponentPublicInstance,
+  ref,
+  toRefs,
+  onMounted,
+  watch
+} from 'vue'
 import { Header } from '@/pages/header/view/index'
 import { Main } from '@/pages/main/view/index'
 import { Footer } from '@/pages/footer/view/index'
-import { mapState } from './module'
 import { ENV } from '@/interface/app'
-import { State, Size } from './state'
-import { dragHook } from '@/utils/hook'
+import { useDrag, uesModuleStore } from '@/hooks/index'
+import { State, Size, NAMESPACED } from './module'
 import './container.less'
 
 const { VUE_APP_PLATFORM } = window as ENV
 
 export const Container = defineComponent({
   name: 'Container',
   setup() {
-    return {
-      start: ref(),
-      stop: ref()
-    }
-  },
-  computed: {
-    ...mapState(['screenSize'])
-  },
-  watch: {
-    screenSize(v) {
+    const startDrag = ref()
+    const stopDrag = ref()
+    const container = ref()
+    const target = ref()
+
+    const { useState } = uesModuleStore<State>(NAMESPACED)
+
+    const { screenSize } = toRefs(useState())
+
+    watch(screenSize, v => {
       if (v === Size.MD) {
-        this?.start()
+        startDrag.value()
       } else {
-        this?.stop()
+        stopDrag.value()
       }
-    }
-  },
-  mounted() {
-    if (VUE_APP_PLATFORM === 'browser') {
-      nextTick(() => {
-        const { container, target } = this.$refs
-        const { start, stop } = dragHook(
-          container as HTMLElement,
-          (target as ComponentPublicInstance).$el
+    })
+
+    onMounted(() => {
+      if (VUE_APP_PLATFORM === 'browser') {
+        const { start, stop } = useDrag(
+          container.value as HTMLElement,
+          (target.value as ComponentPublicInstance).$el
         )
-        this.start = start
-        this.stop = stop
-      })
-    }
-  },
-  render(this: State) {
-    const { screenSize } = this
-    return (
+        startDrag.value = start
+        stopDrag.value = stop
+      }
+    })
+
+    return () => (
       <div
-        ref="container"
+        ref={container}
         class={[
           'container',
-          'container-' + screenSize,
+          'container-' + screenSize.value,
           'container-' + VUE_APP_PLATFORM,
-          'container-' + VUE_APP_PLATFORM + '-' + screenSize
+          'container-' + VUE_APP_PLATFORM + '-' + screenSize.value
         ]}
       >
-        <Header ref="target"></Header>
+        <Header ref={target}></Header>
         <Main></Main>
         <Footer></Footer>
       </div>

src/pages/footer/view/index.tsx

@@ -1,24 +1,23 @@
-import { defineComponent } from 'vue'
-import { mapMutations, LayoutActions, mapState } from '@/layout/module'
+import { defineComponent, toRefs } from 'vue'
+import { NAMESPACED, State, LayoutActions } from '@/layout/module'
+import { uesModuleStore } from '@/hooks/index'
 import './index.less'
 
 export const Footer = defineComponent({
   name: 'Footer',
-  computed: {
-    ...mapState(['rebackSize'])
-  },
-  methods: {
-    ...mapMutations({
-      changeWindowSize: LayoutActions.CHANGE_WINDOW_SIZE
-    })
-  },
-  render() {
-    return (
+  setup() {
+    const { useState, useMutations } = uesModuleStore<State>(NAMESPACED)
+
+    const { rebackSize } = toRefs(useState())
+
+    return () => (
       <footer class="footer">
         <div class="footer-reduction">
           <ve-button
             size="small"
-            onClick={() => this.changeWindowSize(this.rebackSize)}
+            onClick={() =>
+              useMutations(LayoutActions.CHANGE_WINDOW_SIZE, rebackSize.value)
+            }
           >
             <icon icon="fullscreen2" color="#000"></icon>
           </ve-button>

src/pages/header/component/push-shift.tsx

@@ -1,83 +1,79 @@
-import { defineComponent, ComponentPublicInstance, nextTick } from 'vue'
-import { mapMutations, Store, MutationMethod } from 'vuex'
+import { defineComponent, nextTick, watch, toRefs } from 'vue'
 import { Mutations } from '@/store/index'
-import { RootState } from '@/store/index'
 import classnames from 'classnames'
+import { useRoute, useStore, useRouter } from '@/hooks/index'
 import './puah-shift.less'
 
-interface Mtehods {
-  routeForward: MutationMethod
-  routeBack: MutationMethod
-  setHistoryRoute: MutationMethod
-  routeCanBeCollect: MutationMethod
-  handleRouteCommand: (payload: string) => void
-}
-
 enum COMMAND {
   FORWARD = 'FORWARD',
   BACK = 'BACK'
 }
 
-type This = ComponentPublicInstance & {
-  $store: Store<RootState>
-} & Mtehods
-
 export const PushShift = defineComponent({
   name: 'Logo',
-  watch: {
-    $route(this: This, route, oldRoute) {
-      const { historyRoute } = this.$store.state
+  setup() {
+    const store = useStore()
+    const setHistoryRoute = (routeObj: { oldRoute: string }) => {
+      store.commit(Mutations.SET_HISTORY_ROUTE, { oldRoute: routeObj.oldRoute })
+    }
+    const routeCanBeCollect = (isCollect: boolean) => {
+      store.commit(Mutations.CAN_BE_COLLECT, isCollect)
+    }
+    const routeForward = (path: string) => {
+      store.commit(Mutations.FORWARD_HISTORY_ROUTE, path)
+    }
+    const routeBack = (path: string) => {
+      store.commit(Mutations.BACK_HISTORY_ROUTE, path)
+    }
+
+    const { path } = toRefs(useRoute())
+
+    watch(path, (route, oldRoute) => {
+      const { historyRoute } = store.state
       if (!historyRoute.canBeCollect) {
-        this.routeCanBeCollect(true)
+        routeCanBeCollect(true)
       } else {
-        const { historyRoute } = this.$store.state
+        const { historyRoute } = store.state
         const backRoute = historyRoute.after[historyRoute.after.length - 1]
         const forwardRoute = historyRoute.before[historyRoute.before.length - 1]
-        if (route.path === backRoute) {
-          this.routeForward(oldRoute.path)
-        } else if (route.path === forwardRoute) {
-          this.routeBack(oldRoute.path)
+        if (route === backRoute) {
+          routeForward(oldRoute)
+        } else if (route === forwardRoute) {
+          routeBack(oldRoute)
         } else {
-          this.setHistoryRoute({
-            oldRoute: oldRoute.path,
-            route: route.path
+          setHistoryRoute({
+            oldRoute: oldRoute
           })
         }
       }
-    }
-  },
-  methods: {
-    ...mapMutations({
-      setHistoryRoute: Mutations.SET_HISTORY_ROUTE,
-      routeBack: Mutations.BACK_HISTORY_ROUTE,
-      routeForward: Mutations.FORWARD_HISTORY_ROUTE,
-      routeCanBeCollect: Mutations.CAN_BE_COLLECT
-    }),
-    handleRouteCommand(this: This, payload: string) {
-      const { historyRoute } = this.$store.state
-      this.routeCanBeCollect(false)
+    })
+
+    const router = useRouter()
+    const handleRouteCommand = (payload: string) => {
+      const { historyRoute } = store.state
+      routeCanBeCollect(false)
       if (payload === COMMAND.FORWARD) {
-        this.routeForward(this.$route.path)
+        routeForward(path.value)
       }
       if (payload === COMMAND.BACK) {
-        this.routeBack(this.$route.path)
+        routeBack(path.value)
       }
       nextTick(() => {
-        this.$router
+        router
           .replace({
             path: historyRoute.needRoute
           })
           .then(() => {
-            this.routeCanBeCollect(true)
+            routeCanBeCollect(true)
           })
       })
     }
-  },
-  render(this: This) {
-    const { historyRoute } = this.$store.state
-    const forward = () => this.handleRouteCommand(COMMAND.FORWARD)
-    const back = () => this.handleRouteCommand(COMMAND.BACK)
-    return (
+
+    const { historyRoute } = store.state
+    const forward = () => handleRouteCommand(COMMAND.FORWARD)
+    const back = () => handleRouteCommand(COMMAND.BACK)
+
+    return () => (
       <div class="push-shift">
         <ve-button
           disabled={!historyRoute.before.length}

src/pages/header/component/search.less

@@ -33,6 +33,7 @@
       background-color: #0000000f;
       border: none;
       color: white;
+      font-size: 13px;
       &:focus {
         box-shadow: none;
       }

src/pages/header/component/search.tsx

@@ -1,7 +1,8 @@
 import { defineComponent, ref, computed, toRefs, VNode } from 'vue'
 import { debounce } from 'lodash'
 import { Actions } from '../sage'
-import { createUesHook } from '../module'
+import { uesModuleStore } from '@/hooks/index'
+import { NAMESPACED, State } from '../module'
 import './search.less'
 
 interface Context {
@@ -30,7 +31,7 @@ export const Search = defineComponent({
     Option
   },
   setup() {
-    const { useActions, useState } = createUesHook()
+    const { useActions, useState } = uesModuleStore<State>(NAMESPACED)
 
     const words = ref('')
     const loading = ref(false)