feat: use setup in home.vue

fe/src/App.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="app-wraper wraper">
-    <router-view></router-view>
+  <div v-cloak class="app-wraper wraper">
+    <router-view v-slot="{ Component, route }">
+      <keep-alive>
+        <component :is="Component" :key="route.path" v-if="$route.meta.keepAlive" />
+      </keep-alive>
+      <component :is="Component" :key="$route.path" v-if="!$route.meta.keepAlive" />
+    </router-view>
   </div>
 </template>
 

fe/src/components/coupon-rule/index.vue

@@ -9,7 +9,7 @@
     >
       <div class="coupon-rule-title">【优惠券有效期】</div>
       <div class="coupon-rule-detail">
-        <font color="#f00">自领取日起5天内有效</font>
+        <span color="#f00">自领取日起5天内有效</span>
       </div>
       <div class="coupon-rule-title">【活动范围】</div>
       <div class="coupon-rule-detail">所有银联卡（卡号以62开头）</div>
@@ -50,30 +50,19 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue'
-import ColumnDivide from '../column-divide/index.vue'
-
-export default defineComponent({
-  components: {
-    ColumnDivide
-  },
-  setup(props: {}, context: {}) {
-    const state = reactive({
-      isShowRule: true,
-      columnName: '优惠券详情'
-    })
+<script lang="ts" setup>
+import { reactive } from 'vue'
 
-    function showMore() {
-      state.isShowRule = !state.isShowRule
-    }
+import ColumnDivide from '../column-divide/index.vue'
 
-    return {
-      state,
-      showMore
-    }
-  }
+const state = reactive({
+  isShowRule: true,
+  columnName: '优惠券详情'
 })
+
+function showMore() {
+  state.isShowRule = !state.isShowRule
+}
 </script>
 
 <style scoped lang="less" rel="stylesheet/less">

fe/src/pages/home.vue

@@ -10,7 +10,7 @@
           @click="showRegionList"
         >
           <span>
-            <font>{{ regionName }}</font>
+            <span>{{ regionName }}</span>
           </span>
         </a>
         <a
@@ -19,7 +19,7 @@
           @click="showClassifyList"
         >
           <span>
-            <font>{{ classifyName }}</font>
+            <span>{{ classifyName }}</span>
           </span>
         </a>
       </div>
@@ -108,32 +108,30 @@
     >
 
     <div v-if="state.couponList.length === 0" style="background-color: white">
-      <van-skeleton title avatar :row="3" />
-      <van-skeleton title avatar :row="3" />
-      <van-skeleton title avatar :row="3" />
-      <van-skeleton title avatar :row="3" />
-      <van-skeleton title avatar :row="3" />
+      <Skeleton title avatar :row="3" />
+      <Skeleton title avatar :row="3" />
+      <Skeleton title avatar :row="3" />
+      <Skeleton title avatar :row="3" />
+      <Skeleton title avatar :row="3" />
     </div>
 
     <footer-nav></footer-nav>
   </div>
 </template>
 
-<script lang="ts">
-import {
-  reactive,
-  computed,
-  ComputedRef,
-  defineComponent,
-  SetupContext
-} from 'vue'
+<script lang="ts" setup>
+import { reactive, computed, ComputedRef, onMounted } from 'vue'
+
 import { useStore } from 'vuex'
+
 import { StateProps } from '@/store'
 
 import { getCouponsList, getClassifyList, getRegionList } from '@/api/coupon'
 
-import { Skeleton, Dialog } from 'vant'
+import { Dialog, Skeleton } from 'vant'
+
 import Explain from '@/components/header-explain/index.vue'
+
 import FooterNav from '@/components/footer-nav/index.vue'
 
 type State = {
@@ -158,7 +156,6 @@ function _getClassifyList(state: State) {
 
 function _getCouponsList(
   state: State,
-  context: SetupContext,
   regionId: number,
   classifyId: number,
   currentPage: number
@@ -191,106 +188,90 @@ function _getRegionList(state: State) {
   })
 }
 
-export default defineComponent({
-  components: {
-    Explain,
-    FooterNav,
-    [Skeleton.name]: Skeleton
-  },
-
-  setup(props: {}, context: SetupContext) {
-    const store = useStore<StateProps>()
-    const regionId: ComputedRef<number> = computed(
-      () => store.state.app.regionId
-    )
-    const regionName: ComputedRef<string> = computed(
-      () => store.state.app.regionName
-    )
-    const classifyId: ComputedRef<number> = computed(
-      () => store.state.app.classifyId
-    )
-    const classifyName: ComputedRef<string> = computed(
-      () => store.state.app.classifyName
-    )
-
-    const state: State = reactive({
-      explainName: '全球优惠',
-      isRegion: false,
-      regionList: [],
-      classifyList: [],
-      isClassify: false,
-      currentPage: 1,
-      couponList: [],
-      isShowLoadMore: true
-    })
-
-    const showRegionList = () => {
-      state.isRegion = true
-      state.isClassify = false
-    }
-
-    const showClassifyList = () => {
-      state.isRegion = false
-      if (!state.classifyList.length) {
-        _getClassifyList(state)
-      }
-      state.isClassify = true
-    }
+const store = useStore<StateProps>()
 
-    const showCoupons = (regionId: number, classifyId: number) => {
-      const currentregionName = state.regionList
-        ? state.regionList[regionId - 1].regionName
-        : '全球'
-      const currentClassifyName = state.classifyList
-        ? state.classifyList[classifyId - 1].classifyName
-        : '购物'
+const regionId: ComputedRef<number> = computed(
+  () => store.state.app.regionId
+)
 
-      state.currentPage = 1
-      state.couponList = []
+const regionName: ComputedRef<string> = computed(
+  () => store.state.app.regionName
+)
 
-      store.commit('app/changeRegionId', regionId)
-      store.commit('app/changeRegionName', currentregionName)
-      store.commit('app/changeClassifyId', classifyId)
-      store.commit('app/changeClassifyName', currentClassifyName)
+const classifyId: ComputedRef<number> = computed(
+  () => store.state.app.classifyId
+)
 
-      _getCouponsList(state, context, regionId, classifyId, state.currentPage)
+const classifyName: ComputedRef<string> = computed(
+  () => store.state.app.classifyName
+)
 
-      state.isRegion = state.isClassify = false
-    }
+const state: State = reactive({
+  explainName: '全球优惠',
+  isRegion: false,
+  regionList: [],
+  classifyList: [],
+  isClassify: false,
+  currentPage: 1,
+  couponList: [],
+  isShowLoadMore: true
+})
 
-    const loadMore = () => {
-      state.currentPage += 1
-      _getCouponsList(
-        state,
-        context,
-        regionId.value,
-        classifyId.value,
-        state.currentPage
-      )
-    }
+const showRegionList = () => {
+  state.isRegion = true
+  state.isClassify = false
+}
 
+const showClassifyList = () => {
+  state.isRegion = false
+  if (!state.classifyList.length) {
     _getClassifyList(state)
-    _getCouponsList(
-      state,
-      context,
-      regionId.value,
-      classifyId.value,
-      state.currentPage
-    )
-    _getRegionList(state)
-
-    return {
-      state,
-      regionId,
-      regionName,
-      classifyId,
-      classifyName,
-      showRegionList,
-      showCoupons,
-      loadMore,
-      showClassifyList
-    }
   }
+  state.isClassify = true
+}
+
+const showCoupons = (regionId: number, classifyId: number) => {
+  const currentregionName = state.regionList
+    ? state.regionList[regionId - 1].regionName
+    : '全球'
+  const currentClassifyName = state.classifyList
+    ? state.classifyList[classifyId - 1].classifyName
+    : '购物'
+
+  state.currentPage = 1
+  state.couponList = []
+
+  store.commit('app/changeRegionId', regionId)
+  store.commit('app/changeRegionName', currentregionName)
+  store.commit('app/changeClassifyId', classifyId)
+  store.commit('app/changeClassifyName', currentClassifyName)
+
+  _getCouponsList(state, regionId, classifyId, state.currentPage)
+
+  state.isRegion = state.isClassify = false
+}
+
+const loadMore = () => {
+  state.currentPage += 1
+  _getCouponsList(
+    state,
+    regionId.value,
+    classifyId.value,
+    state.currentPage
+  )
+}
+
+onMounted(() => {
+  _getClassifyList(state)
+
+  _getRegionList(state)
+
+  _getCouponsList(
+    state,
+    regionId.value,
+    classifyId.value,
+    state.currentPage
+  )
 })
 </script>
 

fe/src/pages/personal/change-headpic.vue

@@ -18,10 +18,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, SetupContext } from 'vue'
+<script lang="ts" setup>
+import { reactive, onMounted } from 'vue'
+
 import { useRoute } from 'vue-router'
+
 import Explain from '@/components/header-explain/index.vue'
+
 import Upload from '@/components/upload/index.vue'
 
 // 必须要有对应的声明文件，否则编译不通过
@@ -33,31 +36,24 @@ interface File {
   url?: string
 }
 
-export default defineComponent({
-  components: {
-    Explain,
-    Upload
-  },
-  setup(props, context: SetupContext) {
-    const defaultFile: File = { url: '', process: 100 }
-    const state = reactive({
-      explainName: '修改头像',
-      defaultFile,
-      userId: 0,
-      fileMaxLength: 1,
-      uploadFile: 'https://xxx'
-    })
+const defaultFile: File = { url: '', process: 100 }
 
-    const route = useRoute()
+const state = reactive({
+  explainName: '修改头像',
+  defaultFile,
+  userId: 0,
+  fileMaxLength: 1,
+  uploadFile: 'https://xxx'
+})
 
-    const query: any = route.query
-    state.defaultFile.url = decodeURIComponent(query.headpic)
-    state.userId = query.userId
+const route = useRoute()
 
-    return {
-      state
-    }
-  }
+onMounted(() => {
+  const query: any = route.query
+
+  state.defaultFile.url = decodeURIComponent(query.headpic)
+
+  state.userId = query.userId
 })
 </script>
 

fe/src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+
 import routes from './routes'
 
 const router = createRouter({

fe/src/router/routes.ts

@@ -35,7 +35,10 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/home',
     name: 'Home',
-    component: () => import('@/pages/home.vue')
+    component: () => import('@/pages/home.vue'),
+    meta: {
+      keepAlive: true
+    }
   },
   {
     path: '/get-coupon',